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nw.js 中 文 文档 


nw.js "Hx Wiki 


来 源 : nw.js Wiki 


Features list for simplified Chinese( 支 持 列表 ) 


Translation for Features list 


翻译 自 Features list 


下 面 的 列表 是 node-webkit 的 支持 列表 ， 如 果 你 正在 考虑 使 用 node-webkit 或 其 他 的 东西 来 作 
为 未 来 的 发 展 方 同 。 你 可 以 耐心 阅读 并 作出 正确 的 决定 。 页 面 尚未 完成 


完全 文 持 在 浏览 器 中 运行 hode.js 
使 用 方便 
RUI 
无 边框 窗口 
打包 和 与 发 布 
兼容 NPM 
调试 器 支持 
丰富 的 文档 
Kiosk 模 式 (PS: 下 译 为 目 助 模式 ， 疑 为 诸如 目 动 取款 机 等 程序 所 使 用 的 全 屏 模 了 式 。MAC 系 
统 下 未 发 现 区 别 ) 
文件 对 话 框 
媒体 
良好 的 HTML5 支 持 
o Web 组 件 
o 拖 放 
o 数据 持久 性 
WebGL 
WebRTC 
datalist 
o CSS3 


O 


O 


O 


Getting Started with nw.js for simplified 
Chinese( 开 始 nw.js) 


Translation for Getting Started with nw.js 
翻译 自 Getting Started with nw.js 


本 章节 包涵 了 一 些 指导 信息 ， 以 帮助 您 开始 nw.js 编 程 。 假 定 你 有 nw.js 的 二 进 制 文件 (这 样 的 文 
件 都 可 以 在 “下 载 "READEME 的 部 分 ， 如 果 你 想 建立 自己 的 二 进 制 文件 请 参阅 [Building nw.js]) 
nw.js 基 于 Chromium and io.js。 它 可 以 让 你 直接 从 DOM 调 用 Node.js 的 代码 及 模块 ， 使 您 可 以 
使 用 web 技 术 来 开发 应 用 程序 。 此 外 ， 你 可 以 很 轻松 的 打包 web 应 用 到 本 地 应 用 程序 


基础 
首先 我 们 介绍 nw.js， 我 们 先 从 最 简单 的 程序 开始 。 示例 1. Hello World 


i Hello World |-e-J|-- m 


CQ file///E/workwin/test2/helloWordd/in 三 C 


Hello World! 


创建 index.html : 


«html» 

«head» 

«title»Hello World!«/title» 
«/head» 

<body> 

<h1>Hello World!</h1> 
</body> 

«mimi 


创建 package.json : 


"name": "nw-demo'", 
"main": "index.html" 


压缩 index.html 和 package.json 到 zip 压 缩 文 件 ， 并 修改 文件 名 为 app.nw : 


nw.js 中 文 文档 


app.nw 
|-- package.json 
"-- index.html 


下 载 你 所 使 用 的 平台 的 预 构建 的 二 进 制 文件 并 用 它 打开 app.nw 文件 : 


$ ./nw app.nw 


注意 : 在 Windows, 你 可 以 拖 搜 app.nw 到 nw.exe 来 打开 它 。 


示例 2. Native UI API 





| lest] | 
Clicked OK 








nw.js 有 原生 UI 控制 APL 你 可 以 用 这 些 来 控制 窗口 、 菜 单 等 等 
下 面 的 示例 演示 如 何 使 用 菜单 的 API。 


«html» 
«head» 
«title» Menu </title> 
</head> 
<body> 
<script> 
// 载 人 原生 UI 库 
var gui = require('nw.gui!); 


// 创建 空 菜单 
var menu = new gui.Menu(); 


// 添加 菜单 项 ，1labe1 为 菜单 项 的 显示 名 
menu.append(new gui.MenuItem({ label: 'Item A })); 
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menu.append(new gui.MenuItem(( label: 'Item B' })); 
menu.append(new gui.MenuItem(( type: 'separator' })); 
menu.append(new gui.MenuItem(( label: 'Item C' })); 


// 移 除 菜单 项 
menu.removeAt(1); 


// 通 历 菜单 项 
for (var i = 0; i < menu.items.length; ++i) ( 
console.log(menu.items[i]); 


} 


// 添加 菜单 项 并 绑 定 菜单 点 击 后 的 回调 本 数 

menu.append(new gui.MenuItem(41 

label: 'Click Me', 

click: function() { 
// 创建 HTML 元 素 
var element = document.createElement('div'); 
element.appendChild(document.createTextNode('Clicked OK')); 
document.body.appendChild(element); 


})); 


// 弹出 上 下 文 菜单 
document.body.addEventListener('contextmenu', function(ev) { 
ev.preventDefault(); 
// 在 你 点 击 后 弹出 
menu.popup(ev.x, ev.y); 
return false; 
}, false); 


// 获取 当前 窗口 
var win = gui.Window.get(); 


// &jER—^ BIB SE 
Var menubar — new gui.Menu((1 type: ' menubar ' 1); 


// 创建 一 个 菜单 项 
var subí = new gui.Menu(); 


subi.append(new gui.MenuItem((i 

label: 'Testi', 

click: function() (1 
var element - document.createElement('div'); 
element.appendChild(document.createTextNode('Test 1')); 
document.body.appendChild(element); 


} 
3:35 
// 添加 子 菜单 


menubar.append(new gui.MenuItem({ label: 'Sub1', submenu: sub1})); 


// 设置 菜单 窗口 的 菜单 
win.menu = menubar; 


// 添加 一 个 点 击 事件 到 已 有 菜单 
menu.items[O0].click = function() (1 
console.log(" CLICK"); 


H 
</script> 


</body> 
</html> 


示例 3. Using node.js 


您 可 以 曾 接 在 DOMi 调 用 的 Node.js 和 模块 。 因 此 ， 它 实现 了 无 限 的 可 能 性 ， 写 的 应 用 程序 与 
nw.js. 


<NTML> 
<poqy> 


«SC J> 


var os = require('os') 
document.write('Our computer is: ', os.platform()) 


«/«c Cr Lo 
</body> 
< nl> 


运行 与 打包 应 用 


现在 ， 我 们 可 以 写 简 单 的 nwjs 应 用 程序 。 下 一 步 是 了 解 如 何 运 行 并 将 其 打包 。 


运 
多 平台 运行 的 两 种 前 见方 陈 


e 从 一 个 文件 夹 。 启动 路 径 指定 该 文件 夹 。 
e 从 .nw 文 件 〈 重 命名 .ZIP 文 件 ) 。 局 动 路 径 指 定 文件 。 


例如 |: 


nw path to app dir 
nw path to app.nw 


故障 排除 


如 果 有 任何 问题 ， 请 参阅 [Troubleshooting] 。 


回 到 Wiki 以 查看 更 多 


package.json 


it: VDON 
来 源 : node-webkit 文 档 翻译 #package.json 


title: node-webkit 文 档 翻 译 #package.json date: 2013-12-07 21:38:25 


tags: node-webkit 


基本 示例 


"main": "index.html", 
"name": "nw-demo'", 
"description": "demo app of node-webkit", 
"version": "0.1.0", 
"keywords": [ "demo", "node-webkit" ], 
"window": ( 
"title": "node-webkit demo", 
"icon": "link.png", 
"toolbar": true, 
"frame": false, 
"width": 800, 
"height": 500, 
"position": "mouse", 
"min width": 400, 
"min height": 200, 
"max width": 800, 
"max height": 600 


}r 
"webkit": { 
"plugin": true 


必 填 字段 
main 


(字符 串 ) 当 node-webkit 打 开 时 的 默认 页 面 。 


name 


(字符 串 ) 包 的 名 字 ， 必 须 为 独一无二 的 ， 可 由 字母 ， 数 字 ， 下 划 线 组 成 ， 不 能 有 空格 。 
功能 性 字段 


nodejs 


(布尔 型 ) nodejs 是 否 node-webkit 中 启用。 


node-main 


(FFR) 当 node-webkit 打 开 时 的 加 载 的 node.js 文 件 。 可 通过 process.mainModule 访问 


Example : 


Index.htm| 


«html» 
«head» 
«title-»Hello World!«/title» 
</head> 
«body onload="process.mainModule.exports.callbacko()"> 
<h1>Hello World!</hi1> 
We are using node.js <script>document.write(process.version); </script> 
</body> 
</html> 


index.js 


var i- 0; 

exports.callbacko = function () { 
console.log(i + ": " + window.location); 
window.alert ("i = " + i); 
三 


package.json 


£ 
"name": "nw-demo", 
"node-main": "index.js'", 
"main": "index.html" 
j 
window 


控制 窗口 的 样子 ， 后 文 细 讲 。 


webkit 


控制 webkit 特 ' 





生 是 否 启 用 ， 后 文 细 讲 。 


窗口 字段 
title 
(FFE) 默认 打开 的 窗口 的 名 字 。 


toolbar 


(布尔 值 ) 是 否 显示 工具 栏 。 


icon 


(FFR) 图 标的 路 径 。 


position 


(FIFE) 只 可 能 是 这 么 几 个 值 null center mouse 。null 指 无 定位 ，center 指 在 显 


间 ， mouse 指 在 鼠标 的 位 置 

min width/min height 
(整形 ) 定义 宽度 和 高 度 的 最 小 值 。 
resizable 

(布尔 值 ) 窗口 是 否 可 调整 大 小 。 
always-on-top 

(布尔 值 ) 窗口 是 否 总 在 最 上 。 


fullscreen 


(布尔 值 ) 打开 时 是 否 全 屏 。 


frame 
(布尔 值 ) 是 Ta DINER 
如 果 不 显 示 ， 那 应 该 怎么 拖 动 呢 ? 


可 以 在 代 蔡 框架 的 元 素 上 添加 css。 


.titlebar { 
-webkit-user-select: none;// 禁 止 选中 文字 
-webkit-app-region: drag;// 拖 动 
} 
show 


(布尔 值 ) 是 否 在 任务 栏 上 显示 。 


kiosk 


(布尔 值 ) 是 否 多 于 kiosk 状 态 ， 在 kiosk 状 态 下 将 全 屏 并 且 阻 止 用 户 关闭 窗口 。 


Zar 


node-webkit 中 文教 程 


作者 XR 


来 源 : node-webkit 


一 《一 


HIE 


几 个 月 前 ， 要 开发 一 个 简易 的 展示 应 用 ， 要 求 文 持 离线 播放 (桌面 应 用 ) MERE (web ù 
H) le) 


当时 第 一 想到 的 是 flex， 同 一 套 代码 (或 者 只 需 少 量 的 更 改 ) Wr bI S] 35 17 TE SRTRERDE 0] 88 
上 。 由 于 很 多 展现 效果 要 全 新 开发 ， 我 想到 了 
impress.js(https://github.com/bartaz/impress.js/)。 如 果 选 择 impress.js， 就 意味 着 要 将 html5 
作为 昌 面 上 应用， 当时 想到 要 封 芒 webkit， 但 是 本 人 对 这 方面 也 不 是 很 熟悉 ， 时 间 也 很 有 限 ， 就 
又 治 着 这 个 方向 搜索 ， 找 到 了 node-webkit(https:/github.com/rogerwang/node-webkit)。 


node-webkit 解决 了 我 通过 html 和 js 来 编写 果 面 应 用 的 难题 。 


至 于 node-webkit 的 定义 ， 按 照 作者 的 说 法 : 


“ 基于 node.js 和 chromium 的 应 用 程序 实时 运行 环境 ， 可 运行 通过 HTML(5)、CSS(3)、 
Javascript 来 编写 的 本 地 应 用 程序 。node.js 和 webkit 的 结合 体 ，webkit 提 供 DOM 操 作 ， 
node.js 提 供 本 地 化 操作 ; 旦 将 二 者 的 context 完 全 整合 ， 可 在 HTML 代 码 中 直接 使 用 node.js 的 
API ” 





node-webkit 字 习 (1)hello world 


作者 XR 


来 源 : node-webkit 学 习 (1)hello world 


E x 


e 1.1 环境 安装 
o 1.1.1 windows F BS zz 
o 1.1.2 linux 环 境 下 的 安装 
e 1.2 hello world 


= ri J+ 
1.1 环境 安装 
webkit 是 开源 项 目 ， 项 目地 址 为 https://github.com/rogerwang/node-webkit。 


我 们 可 以 在 该 项 目 首页 找到 downloads 节 (https://github.com/rogerwang/node- 
webkit#downloads) ， 该 处 提供 了 预 编 译 版 本 : 


Prebuilt binaries (v0.9.2 - Feb 20, 2014): 
e Linux: 32bit / 64bit 
e Windows: win32 


e Mac: 32bit, 10.7+ 


1.1.1 windows 下 的 安装 


FAwindowshhAKByzeXe e, fe Uf Ao 
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X) + + hode Aebi 1117 





名 称 ! 修改 日 期 

G credits.html 2014/2/19 21:37 
| | ffmpegsumo.dll 2014/2/19 21:37 
kl icudt.dil 2014/2/19 21:37 
id li:bEGL.dll 2014/2/19 21:37 
| | libGLESv2.dlll 2014/2/19 21:37 
kl nw.exe 2014/2/19 21:37 
|| nw.pak 2014/2/19 21:37 
mwsnapshot.exe 2014/27/19 21:37 


双击 nw.exe, 出 现 如 下 界面 : 


一 = 一 一 一 一 -一 一 一 -一 一 一 一 -- -= 一 一 -一 


zu = 
€ credits.html 

Li mpegsumao.dil 
L icudi. dil 

L] BBEGLH 

Li hbOLESv7. dii 


Lind | 


EIL ———— 
i 
— X 


— Os 


2c 


trociblank 


| | rw, pak 
7  pusnapshotexe 





1.1.2 linux 环 境 下 的 安装 
EAubuntuz; Bj, HA TFR zi. 


wget http://dl.node-webkit.org/v0.8.5/node-webkit-v0.8.5-linux-ia32.tar.gz 


node-webkit£2 5] (1)hello world 


Eana VirtualBox:=~/ns$ wget http://dl .node-webkit.org/ve.8.5/node=webk 
1t-vO.8.5-Linux-1a32.tar .gz 

SIUE -64. BB 14:34:19-- http://dl.node-webkit.org/ve.8.5/node-webkit=ve.8.5-1in 
L232 .tar.gz 
正在 解析 主机 dl.node-webkit.org (dl.node-webkit.org)... 1808.161.188.64 
正在 连接 dl.node-webkit.org (dl.node-webkit.org)|108. 161.188.64]:80... 所 连接 .: 
已 发 出 HTTP 请 求 ， 正 在 等 待 回 应 .. 200 OK 


长 度 : 37577467 (36M) [application/octet-streanm] 
FEEFFE: "node-webkit-v6.8.5-linux-ia32.tar.gz.1" 


剩余 8m 41sE 





tar -xzf node-webkit-v0.8.5-linux-ia32.tar.gz 
xuanhunfxuanhun-VirtualBox:~=/Nnw$ tar -xzf node-webkit-ve.8.5-linux-ia32.tar .gz 
xuanhungixuanhun -VirtualBox:- 


xuanhun@xuanhun- VirtualBox: -/nw/node- webkit- v0.8.5- linux- ia325 ls 
credits.html  libffi 





运行 nw， 看 是 否 正 党 。 


xuanhungxuanhun-VirtualBox:-/nw/node-webkilt-v8.8.5-linux-ia325 ./nw 


Sh error while loading shared libraries: 人 .6B: cannot open shared obj 
ect file: No such file or director 


我 出 现 





./nw: error while loading shared libraries: libudev.so.0: cannot open shared object file: 


ie = 
的 错误 。 可 以 按 如 下 方式 解决 : 





1) 下 载 安装 ghex : sudo apt-get install ghex 


HT 
"m 时 


UE aciem 
AERA BORSA 包 : 
libgtkhex-3-0 
下 列 【 新 】 软 件 包 将 被 安装 : 
ghex libgtkhex-3-0 
升级 了 8 个 软件 包 , 新 安装 了 2 
a 
"m 要 下 载 B08 kB EX "nu. 
解压 缩 后 会 消耗 掉 3,286 kB 的 额外 空间 
4x M BIET dA fT "? AZ LM 
H :1 http: lien.archive.uvbunty.comn/ubuntyu/ 
-8.1-1 [34.2 kB] 
HN : 2 http://cn.archive.ubuntu.com/ubuntu/ saucy/universe għex i386 3.8.1-1 [7 
73 kB] 
下 载 868 kB ,新 时 CMCETES TES 
Selecting previously unselected package libgtkhex-3-0. 
(正在 读 取 数据 库 系统 当前 共 安 装 有 167043 个 文件 和 目录 ， 
ETRE tibgtkhex- 3-0 (M .../libgtkhex-3-0 3.8.1-1 i386.deb) ... 
Selecting previously uns stected package ghex. 
正在 和解 压缩 ghex 【从 .../archives/għex_3.8.1-1_1386.deb) 
正在 处 于 用 于 Libglib2.6- :1385 MAH. 


H4 


个 软件 包 , ER e 个 软件 包 ， 有 294 个 软件 包 未 被 逢 


294 


saucy /universe libgtkhex-3-0 i386 3 


正在 处 理 用 于 
正在 处 理 用 于 
正在 处 于 用 于 
正在 处 于 用 于 
正在 处 理 用 于 
正在 处 理 用 于 


ub (HB) x TER 

gconf2 [rji s. 
hicolor-icon-theme [je 2... 
gnome-menus AJALE ZS.. 
desktop-file-utils 的 触 TI 
MET ETZ MESE eu 2%. 


Rebuilding /usr/s lisre/applications/banf- ds index. a. 
正在 处 理 用 于 mime- support iba 

正在 设置 tibgtkhex-3-8 (3.8.1-1) 

正在 设置 għex (3.8.1-1) ... 

正在 处 理 用 于 Ltbc-btn HARA... 


2) 在 nw 可 执行 文件 目录 中 用 ghex 打 开 nw : 





ghex nw 


T 


Bo 
ag 
日 日 74 81 
90 804 
ga 
4 g4 
日 4 


06 08 





000000500: 
66660666 13 


80 84 





1179403647 Jat 


17791 1.307337e404 — Bt : 


EF E || | m 
Float 32 bit: 





17791 Float 64 bit: | 1.396131e-309 ACE: B8 -— -$ 
以 十 六 进 制 显示 无 符号 数 和 浮 扎 数 

HH : 0x0 

- Linux-13325 ghex nw 


xUanhungxuanhun-VirtualBox:= /n/node-webkit-ve .8. 


3) 在 ghex 中 ，ctrl+f, 打 开 搜 索 工 具 ， 查 找 libudev.so.0。 
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atch handle .WM 


SF 64 65 |. udev e 








69 63 65 SF 67 1 6E 74 5F|vice get parent 
69 74 68 5F 73 75 62 73 79 73 74 65 6D SF 64Wwith subsystem d 
J6 74 79 780 65 00 75 54 65 76 5F 6D 6F 5E 69jevtype.udev moni| 
6F 72 5F 67 65 74 5F 66 64 00 75 64 65 76 5f|tor get fd.udev 





GHex (nw) : 查找 数据 [ice get prope 
eum -»» value. udev d 
i BIRF IP ce get subsys 









6C 69 62 75 64 65 76 2E 73 6F 2E|Libudev.so.| RB. udev enumera 


[5 
X9 si i | |. | 165 

133. 1615 : | | > 查找 下 一 个 (NM) | & 查找 上 一 个 (P) , 取消 (Q) EE [01110101 

无 符号 16 位 : | 25717 Float 64 bit: | 5.059072e-85 | KE: |8 mieu 


E 显示 小 尾 序 解码 BELT ZEISRXSSEBmS RSS 





IS: Ox4DAOF 


天 闭 搜 索 框 ， 在 右 侧 字符 窗口 ， 修 改 0 为 1。 









65ldev.so(l1gudev de 
72 65 6E 74 5F|vice get parent 
74 65 6D 5F 64with subsystem d 
5F 6D 6F 6E 6 d | 
75 64 65 76 5F[tor get fd.udev 
70 72 6F 70 ice get 
64 65 76 5F 64|rty value.udev d 
75 62 73 79 73levice get subsys 

| | 6ljtem. udev enumera 








4)ctrl+s 保 存 后 退出 ghex， 现 在 再 打开 nw 就 会 看 到 一 个 小 窗口 了 ， 这 就 成 功 了 。 


node-webkit 学 习 (1)hello world 


node-webkit 


C nmw:blank 


Hi F 
fn T "nei d 
获取 : 1 httj 
-8.1-1 [34, 
iEHX :2 htt 
73 sd. 

FE $ 608 kB 
selecting "| 
【正在 读 Hi 数 
正在 解压 Fit 

3e et P 


正在 处 理 用 了 
nn "VirtualBox: anode webkit-v80.B. zn lLinux-1a325 ghex nw 
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1.2 hello world 


对 新 的 运行 时 的 党 斌 ， 往 往 都 是 从 经 典 的 hello world 开 始 ， 本 人 也 不 免 落 俗 。 
先 新 建 一 个 helloWorld 目 录 ， 存 放 相 关 文 件 。 


xuanhun(ixuanhun-VirtualBox:-/nwS mkdir helloword 





xuanhun(ixuanhun-VirtualBox:-/nw$ 


先 创 建 helloWorld.html 文 件 ， 内 容 如 下 (来 自作 者 的 示例 ) 


<!DOCTYPE html» 

«html» 

«head» 

«title2»Hello Wworld!«/title» 

</head> 

<body> 

<h1>Hello Wworld!</h1> 

We are using node.js <script>document.write(process.version)</script>. 
</body> 

</html> 


xuanhun(xuanhun-VirtualBox:-/nw/hellowordS vim helloword.html 
xuanhun@xuanhun-VirtualBox:=~/nw/helloword$s ls 


helloword.htmLl 
EAT helloword: 


下 一 步 ， 创 建 package.json 文 件 : 





"name": "helloworld", 
"main": "helloworld.html" 


xuanhun(pxuanhun-VirtualBox: -/nw/helloword 





第 三 步 ， 将 helloworld.html 和 package.json 打 包 到 一 个 zip 文 件 包 中 。 


xuanhungxuanhun-VirtualBox:-/nw/hħhellowords zip hello.nw helloword.htnml package. 
San 
adding: helloword.html (deflated 30%) 
adding: package.json (deflated 8%) 
xuanhungxuanhun-VirtualBox:-/nw/helloword$ ls 
hello.nw Mhelloword.html  package.json 


下 面 我 们 使 用 nw 来 执行 压缩 包 。 





./nw ../helloword/hello.nw 


Hello world! 


c 'ile:///tmp/.org.chromium.Chromium.vaCOck/helloword.html 


Hello World! 


We are using node.js v0.10.22. 





下 一 篇 文章 ， 讲 解 基本 的 程序 结构 和 配置 。 


node-webkit 学 习 (2) 基 本 结构 和 配置 


IL = L mm 
fs Z rri 
VEZ c: oL 
LH US 


来 源 : node-webkit 学 习 (2) 基 本 结构 和 配置 


Ex 


e 2.1 基本 程序 结构 
e 2.2 package.json 
o 2.2.1 必须 的 配置 
o 2.2.2 特性 控制 字段 
e 2.3 小 结 


2.1 基本 程序 结构 


Describes Package Information 


-- index.html 
| |--js/ 


App HTML/CSS/JS files 


Node.js moduels 





如 上 图 ， 是 一 个 nw 程序 的 基本 组 织 结构 ， 在 根 目 录 下 package.json ,程序 的 配置 文件 ; 
index.html( 可 以 是 任意 名 称 )， 应 用 的 启动 页 面 ; js/css/resources， 上 应 用 的 样式 、 脚 本 、 
html、 图 片 等 资源 文件 ; node_modules 存 放 node.js 的 扩展 组 件 。 


nw 在 启动 应 用 程序 时 ， 首 先 要 读 取 package.json 文 件 ， 初 始 化 基本 属性 ， 下 面 我 们 看 看 
package.json 的 参数 。 


2.2 package.json 


一 个 完整 的 package.json 实 例如 下 : 


"main": "index.html", 
"name": "nw-demo'", 
"description": "demo app of node-webkit", 
"version": "0.1.0", 
"keywords": [ "demo", "node-webkit" ], 
"window": ( 

"title": "node-webkit demo", 

"icon": "link.png", 

"toolbar": true, 

"frame": false, 


"width": 800, 
"height": 500, 
"position": "mouse", 


"min width": 400, 
"min height": 200, 
"max width": 800, 
"max height": 600 


}r 
"webkit": { 
"plugin": true 


2.2.1 必须 的 配 征 
在 上 面 的 配置 中 main 和 name 是 必须 的 属性 。 
main 指定 程序 的 起 始 页 面 。 


name 字符 串 必须 是 小 写字 母 或 者 数 宇 ， 可 以 包含 "." 或 者 " "或 者 "-" ， 不 人 允许 带 空 
格 。 Name 必须 全 局 唯一 。 


2.2.2 特性 控制 字段 


nodejs 
bool 值 ， 如 果 设 置 为 false， 将 禁用 webkit 的 node 支 持 。 


在 上 一 篇 文章 (node-webkit 学 习 (1) hello world) 中 的 示例 ， 在 helloWorld.html 中 ， 输 出 了 
node.js 的 版 本 信息 ， 现 在 我 们 在 pakage.json 中 共用 node。 
"i 


| package.json X 


{ 


"name": "nw-demo", 


"main": "helloword.html", 
"nodejs":false 


y 





结果 如 下 : 


Hello World! 





eG file:///tmp/.org.chromium.Chromium.F4Y Vgl/helloword.html 


į Hello World! 


at ; 
We are using node.js . 


hb Ced. bep ma ILKIBI S : 


[10894:0409/144559: INFO:CONSOLE(8)] "Uncaught ReferenceError: process is not defined", so 
ue m orc E 


node-main 





FR, fHXE— Anode jsi, SEF Ea, ZAFRA, Az gZm-Tnode- 
webkit 加 载 html 的 时 间 。 它 在 node 上 下 文中 运行 ， 可 以 用 它 来 实现 类 似 后 台 线 程 的 功能 。 


在 node-main 脚 本 中 还 可 以 访问 全 局 的 “ window "对象 ， 它 指向 DOM 窗 口 ， 但 是 如 果 页 面 导 航 
发 生变 化 ， 访 问 到 的 window 对 象 也 会 发 生变 化 。 因 为 它 执 行 时 间 要 时 于 DOM 加 载 ， 所 以 要 等 
页 面 加 载 完 毕 ， 才 能 使 用 window "对象 。 


同时 ， 在 DOM 页 面 中 ， 可 以 通过 process.mainModule 来 获取 node-main 信 息 。 


继续 修改 之 前 的 helloworld， 在 程序 源 文 件 夹 下 ， 添 加 一 个 hellojs， 内 容 如 下 : 


var 1 = 0; 

exports.callbackOo = function () { 
console.log(i + ": " + window.location); 
window.alert ("i = " + i); 
1-434 


修改 helloworld.html 为 : 


<html> 

<head> 

<title>Hello World!</title> 

</head> 

<bodyonload="process.mainModule.exports.callbacko()"> 

<h1>Hello Wworld!</h1> 

We are using node.js <script>document.write(process.version); </script> 
</body> 

</html> 
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hello.js helloword.html package.json 


修改 package.json， 添 加 “node-main” 配 置 。 


package.json (-/.cache/.fr-wtISa7) - gedi 
E Lr LI S 撤消 


|] package.json x 


"name": "nw-demo", 
"main": "helloword.html", 
"nodejs":true, 
"node-main":"hello.js" 





重新 打包 所 有 文件 ， 运 行 。 


& File:///tmp/.org.chromium.Chromium.5dkeVy/helloword.html 
Hello World! 


f We are using node.js v0.10.22 





不 停 的 刷新 页 面 ， 可 以 看 到 i 值 在 不 断 增 加 ， 证 明 node-main 中 的 代码 在 单独 的 contex 中 运行 。 


o file:;///tmp/.org.chromium.Chromium.5dkeVv y/helloword.html 


Hello World! 


We are using node.js v0. 10.22 
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"Wr n EI 





single-instance 


bool 值 。 默 认 情 况 下 ， 如 果 将 node-webkit 程 序 打包 发 布 ， 那 么 只 运行 同时 启动 一 个 该 应 用 的 
实例 。 如 果 你 希望 允许 同时 启动 多 个 实例 ， 将 该 值 设置 为 false。 


window 

设置 窗口 外 观 。 由 一 组 子 属性 构成 ， 分 别 如 下 : 
title 

字符 串 ， 设 置 黑 认 title。 

width/height 

主 窗 口 的 大 小 。 

toolbar 

bool 值 。 是 否 显示 导航 栏 。 


现在 修改 package.json 如 下 : 


Lj package.json x 


i 
"name": "nw-demo", 
"main": "helloword.html", 
"nodejs":true, 
"node-main":"hello.js", 
"width":180, 
"height":2080, 


"window": 1 
"title": "RESI", 
"toolbar": false, 
"width": 300, 
"height": 200 
J 
j 





重新 运行 程序 ， 结 果 如 下 : 


rramnhinirianhin Vs 


设置 默认 





在 图 中 我 们 可 以 看 到 ， 窗 口 的 title、 大 小 和 显示 位 置 都 发 生 了 变化 ， 同 时 导航 栏 消 失 了 。 
icon 

窗口 的 icon。 

position 

字符 串 。 窗 口 打 开 时 的 位 置 ， 可 以 设置 为 "nul"、“center 或 者 "mouse"。 

min width/min height 

窗口 的 最 小 值 。 

max width/max height 


窗口 显示 的 最 大 值 。 


as desktop 


bool 值 。 (暂时 还 没 明 白 具 体 作 用 ) 
resizable 

bool 值 。 是 否 人 允许 调整 贸 口 大 小 。 
always-on-top 

bool 值 。 窗 口 置 顶 。 

fullscreen 

bool 值 。 是 人 否 全 屏 显 示 。 
show in taskbar 


是 否 在 任务 栏 显 示 图 标 。 


package.json x | 图 hellojs x 


"name": "nw-demo", 


"main": "helloword.html", 


"nodejs":true, 
"node-main":"hello.js", 
"width":100, 
"height":2808, 
"window": [ 
"title": "RASU", 
"toolbar": false, 
"width": 300, 
"height": 2600, 


如 上 图 ， 配 置 程序 在 任务 栏 星 示 ， 在 windows 和 ubuntu 下 运行 ， 


helloword 





都 可 以 看 到 显示 任务 栏 图 标 。 


— 0 


Q EEZ. a 2s 


Hello World! 














We are using node js v0. 11.9 
































frame 
bool 值 。 如 果 设 置 为 false， 程 序 将 无 边框 显示 。 


示例 package.json: 


|] packagejson x | E hello.js x kj helloworc 


"name": "nw-demo", 
"main": "helloword.html", 
"nodejs":true, 
"node-main":"hello.js", 
"width" :100, 

"height" :200, 

"window": { 


"title": "RERU", 


"toolbar": false, 

"width": 300, 

"height": 200, 
"resizable" :false, 


" M 





Hello World! 


We are using 





默认 情况 下 ， 无 边框 的 程序 ， 将 不 可 拖 动 。 
可 以 通过 添加 如 下 样式 来 使 窗口 可 拖 动 : 


«html» 

«head» 

«style» 
body 
{ 


-webkit-user-select:none; 
-webkit-app-region:drag; 
j 
</style> 
</head> 
«body onload="process.mainModule.exports.callbacko()"> 
<h1>Hello Wworld!</h1> 
We are using node.js 
<script>document.write(process.version); </script> 
</body> 
</html> 


show 


bool 值 ， 如 果 设 置 为 false， 和 启动 时 窗口 不 可 见 。 


kiosk 


bool 值 。 是 否 使 用 kiosk 模 式 。 如 果 使 用 kiosk 模 式 ， 应 用 程序 将 全 屏 显 示 ， 并 且 阻 止 用 户 离开 
应 用 。 


webkit 

webkit 属 性 ， 用 来 控制 webkit 一 些 特性 的 打开 或 者 天 闭 ， 由 一 组 属性 组 成 。 
plugin 

bool 值 ， 是 否 加 载 插 件 ， 如 flash， 默 认 值 为 false。 

java 


bool 值 ， 是 否 加 载 Java applets， 默 认为 false。 


page-cache 


bool 值 ， 是 否 启 用 页 面 缓存 ， 默 认为 false。 


user-agent 
应 用 发 起 http 请 求 时 ， 使 用 的 user-agent 头 信息 。 下 列 占 位 符 可 以 被 蔡 换 : 

e %name: 蔡 换 配置 中 的 name 属 性 

e %ver: 蔡 换 配置 中 的 version 属 性 

e %nwver: 被 node-webkit 版 本 信息 替换 . 

e 9owebkit ver: 被 WebKit 引擎 的 版 本 信息 替换 . 
-+%osinfo: 被 操作 系统 和 CPU 信息 著 换 ， 在 浏览 器 的 user agent 字符 串 中 可 以 被 看 到 |. 
示例 配置 


"name": "nw-demo'", 
"main": "helloword.html", 
"nodejs":true, 
"node-main":"hello.js", 
"window": ( 
n title" : "设置 默认 )" 
"toolbar": true, 
"width": 300, 
"height": 200, 
"resizable":true, 
"show in taskbar":true, 
"frame":true, 
"kiosk":false 
}, 
"webkit":( 
"plugin":true 
j 


"user-agent": "测试 %ver %nwver 9ewebkit ver windows7" /* 替换 占 位 符 内 容 即 可 */ 


chromium-args 
string 类 型 ， 自 定义 chromium 启动 人 参数。 详细 的 参数 列表 参 
Æ : http://src.chromium.org/svn/trunk/src/content/public/common/content_switches.cc 


js-flags 


string 类 型 ， 传 递 给 js 引擎 (V8) 的 参数 。 例 如 ， 想 启用 Harmony Proxies 和 CollectionsZJ 
能 ， 可 以 使 用 如 下 配置 方式 : 


{ 

"name": "nw-demo", 

"main": "index.html", 

"js-flags": "--harmony proxies --harmony collections" 
j 


inject-js-start / inject-js-end 


string 类 型 。 指 定 一 个 js 文件 。 

对 于 inject-js-start， 该 js 文件 会 在 所 有 css 文 件 加 载 完 半 ，dom 初 始 化 之 前 执行 。 
对 于 inject-js-end， 该 js 文件 会 在 页 面 加 载 完 毕 ，onload 事 件 触发 之 前 执行 。 
snapshot 
string 类 型 ， 应 用 程序 的 快照 文件 路 径 。 包 含 编 译 的 js 代码 。 使 用 快照 文件 可 以 有 效 的 保护 js 代 
码 。 后 续 文 章 会 详细 介 22. 

dom storage quota 

int 类 型 ，dom 存储 的 限额 (以 目 己 为 单位 ) 。 建 议 限制 为 你 预想 大 小 的 2 倍 。 
no-edit-menu 

bool 值 ，Edit 荣 单 是 否 显示 。 仅 在 Mac 系 统 下 有 效 。 

description 

简要 摘 述 

version 

版 本 信息 

keywords 

At is] 

maintainers 


软件 维护 者 信息 ， 是 一 个 数组 ， 示 例如 下 : 


"maintainers":[ (1 
"name": "Bill Bloggs", 
"email": "billblogsQbblogmedia.com", 
"web": "http://www.bblogmedia.com", 
;] 


每 个 维护 人 的 信息 中 ，name 字 上 段 是 必须 字段 ， 其 他 两 个 (email 和 web) 是 可 选 字段 。 


contributors 

贡献 者 信息 ， 格 式 同 maintainers， 按 照 约定 ， 第 一 个 contributor 是 该 应 用 的 作者 。 
bugs 

提交 bug 的 url。 可 以 是 “mailto : "或 者 “http:/” 格 式 。 

licenses 


一 个 数组 ， 可 以 包含 多 个 声明 。 每 个 声明 包含 “type” 和 “ur 两 个 属性 ， 分 别 指 定 声明 的 类 型 和 
文本 。 


示例 如 下 : 


"licenses": [ 


"type": "GPEv2'", 
"url": "http://www.example.com/licenses/gpl.html", 


repositories 
程序 包 的 存储 地 址 数组 。 示 例如 下 : 


"repositories": [ 
"type" 2 KODE 


"url": "http://github.com/example.git", 
"path": "packages/mypackage" 


type 和 url 指 定 可 以 下 载 或 者 克隆 程序 包 的 地 址 ， 如 果 程 序 包 不 在 根 目 录 中 ， 需 要 在 path 属 性 
指定 相对 目录 。 


2.3 小 结 


本 篇 文章 基本 涵盖 了 package.json 的 所 有 字段 的 说 明 ， 有 些 字 段 本 人 也 不 明白 实际 用 途 ， 还 有 
些 字 段 现 阶段 node-webkit 也 没有 使 用 (description, version, keywords, maintainers, 
contributors, bugs, licenses, repositories) . 


下 一 篇 文章 介绍 常用 的 native api, 


node-webkitz 5] (3JNative UI API 概 览 


作者 : XR 

来 源 : node-webkit 学 习 (3)Native UI APTE i, 
目录 
node-webkit 学 习 (3)Native UI API 概 览 


e 3.1 Native UI apiti 
o Extended Window APIs. 
o Menus. 
o Platform Services. 
o Tips. 
e 3.2 注意 事项 
e 3.3 EventEmitter 
e 34 小 结 


3.1 Native UI api Ji 


Native UI APl， 是 提供 了 在 代码 中 访问 、 控 制 应 用 程序 界面 显示 的 接口 。 和 使 用 node.js 模 块 
类 似 ， 想 要 访问 node-webkit 的 Native UI API， 需 要 先 加 载 “nw.gui" 模 块 。node-webkit 的 模块 
命名 意 循 node.js 规 泥 ， 所 以 不 必 担 心 产生 冲突 。 


下 面 我 们 创建 本 文 的 示例 程序 。 


先 创 建 guidemo.html， 内 容 如 下 : 


«html» 

«head» 

«/head» 

«body» 

«hi»Hello GUI</h1> 
«script» 

</script> 

</body> 

</html> 


package.json 内 容 如 下 : 


"name": "gui-demo", 

"main": "guidemo.html", 

"nodejs":true, 

"width":100, 

"height":200, 

"window": ( 
"title": "GUI DEMO", 
"toolbar": true, 
"width": 800, 
"height": 600, 
"resizable":true, 
"show in taskbar":true, 
"frame":true, 
"kiosk":false 


je 
"webkit":( 
"plugin":true 


























Jg 
名 称 修改 日 期 
| (E| guidemo.html 2014/4/10 15:3C 
|"| package.json 2014/4/10 15:28 
@ Gur DEMO F | = | C a 
i 一 - dÉR 0 = - | 
QU BleJy//CfUsers/ADMINI- 1/AppData/Local/Temp/rw3188 29760/auideme. html = 0 | 


| Hello GUI 


| 


3235; y] native ui api， 需 要 先 加 载 “"nw.gui" 模 块 ， 代 码 如 下 : 


var gui = require('nw.gui'); 


加 载 gui 模 块 之 后 ， 就 可 以 像 创建 普通 的 javascript 对 象 一 样 ， 创 建 GUI 元 素 了 。 例 如 ， 我 们 可 
以 使 用 如 下 代码 创建 一 个 菜 。 


var menu = new gui.Menu(( title: ' 菜 单 ' 1); 


下 面 ， 我 们 按 如 下 内 容 修 改 guidemo.html : 


«html» 
«head» 
«title»guic/title» 
«meta http-equiv-z"Content-Type" content-z'text/html; charset-utf-8" /> 
</head> 
<body > 
<h1>Hello GUI 菜单 </h1> 
«script» 
var gui - require('nw.gui'); 
var menubar = new gui.Menu(( type: 'menubar' }); 
var subi - new gui.Menu(); 
subi.append(new gui.MenuItem((i 
label: ' 子 菜单 1"， 
click: function() { 
var element = document.createElement('div'); 
element.appendChild(document.createTextNode('Test 1')); 
document.body.appendChild(element); 


j 
3)) 


menubar.append(new gui.MenuItem([ label: '3&€1', submenu: subi })); 
var win = gui.Window.get(); 
win.menu = menubar; 

</script> 

</body> 

</html> 


首先 ， 通 过 


var gui = require('nw.gui'); 


JI zx nw.gui fS ik, 


随后 通过 


var menubar = new gui.Menu(( type: 'menubar' }); 


创建 了 一 个 menubar 类 型 的 Menu， 即 菜单 栏 。 有 了 菜单 栏 之 后 就 可 以 向 其 中 添加 菜单 了 。 我 
们 创建 了 一 个 菜单 “sub1”， 通 过 添加 Menultem 对 象 ， 添 加 该 菜单 的 下 拉 选 项 ， 并 定义 了 click 
事件 。 


menubar.append(new gui.MenuItem(( label: '¥¥1', submenu: subi })); 


将 sub1 添 加 为 菜单 1 的 子 菜单 。 
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目前 为 止 ， 菜单 项 创建 完毕 ， 需 


var win = gui.Window.get(); 


获取 窗口 对 象 ， 然 后 通过 


win.menu = menubar; 


设置 窗口 的 菜单 。 
运行 效果 如 下 
a 
TUM 一 E eej 
ELI | 
| | TR CU sers/ADMINI- L/AppData/Local/Temp/nwi15DA 18819/guidemo html zo | 
ETE ur uns 
Hello GUI 菜单 
lest] 
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对 于 每 个 gui 对 象 的 属性 ， 比 如 title、label、 icon 和 menu， 可 以 直接 通过 对 象 去 访问 和 修改 。 
比如 下 面 的 代码 : 


menu.title = 'New Title'; 


remove, append 和 insert 方 法 ， 在 每 个 GUI 对 象 上 都 可 以 使 用 ， 例 如 : 


menu.append(new gui.MenuItem(( label: 'Im an item' })); 
menu.removeAt(0); 


子 元 素 通 党 被 存储 在 items 字 段 中 ， 可 以 通过 索引 进行 访问 : 


for (var i = 0; i < menu.items.length; ++i) { 
console.log('MenuItem', i, menu.items[i]); 


j 


在 上 面 的 示例 代码 中 ， 我 们 主要 以 menue 为 例 进 行 介 绍 ，native ui api 大 致 可 划分 为 如 下 的 类 
p) : 


e Extended Window APIs 
o Window 
o Frameless Window 
e Menus 
o Menu 
o Menultem 
o Window menu 
e Platform Services 


o App 一 每 一 个 应 用 都 可 以 访问 的 全 局 落 数 
o Clipboard — 剪贴 板 
o Tray 一 状态 显示 与 通知 
o File dialogs- 文 件 对 话 框 
o Shell 
o Handling files and arguments 
e [ips 
o Show window after page is ready 
o Minimize to tray Preserve window state between sessions 


不 要 通过 赋值 的 方式 直接 修改 一 个 GUI 对 象 ， 比 如 : 


menu, Items[0] = item 


或 者 


item = new gui.MenuItem(1í)) 


想 要 车 换 一 个 元 素 ， 需 要 先 remove 再 insert。 


在 调用 gui api 过 程 中 出 现 的 异常 ， 目 前 node-webkit 并 没有 做 处 理 ， 程 序 会 直接 月 演 。 要 小 心 
重复 删除 元 素 之 类 的 操作 。 


删除 一 个 对 象 之 后 ， 要 将 其 设置 为 null 值 ， 如 : 


var tray = new gui.Tray(...); 

// blablabla... 

// We are done with it 

tray.remove( ); 

tray - null; // This line is very important 

Do not change UI types' prototype ( 没 明 白 具 体 指 什么 ， 望 读者 告知 ) 


3.3 EventEmitter 


在 node-webkit 中 ， 每 一 个 ui 元 素 都 从 node.js 的 EventEmitter 继 承 而 来 ， 所 以 你 可 以 用 如 下 的 
方式 监听 元 素 的 实践 : 


menuitem.on('click', function() { 
console.log('Item is clicked'); 


32): 


3.4 小 结 


本 文 内 容 主 要 来 目 node-webkit 的 家 方 英 文 文档 (https://github.com/rogerwang/node- 
webkit/wiki/API-Overview-and-Notices) ， 做 了 适当 的 改编 和 调整 。 主 要 目的 是 从 整体 上 认识 
Native UI API， 同 时 了 解 基本 用 法 。 之 后 的 文章 ， 会 对 每 一 个 类 别 的 api 做 详细 的 介绍 。 


node-webkit 字 习 (4)Native UI API ;Z window 


作者 XR 


来 源 : node-webkit 学 习 (4)Native UI API 之 window 


Ex 


e 4.1 window api 概述 
e 4.2 获取 和 创建 窗口 
e 4.3 window 对 象 属性 和 方法 
o 4.3.1 Window.window 
o 4.3.2 Window.x/Window.y 
o 4.3.3 Window.width/Window.height 
o 4.3.4 Window.title 
o 4.3.5 Window.menu 
o 4.3.6 Window.isFullscreen 
o 4.3.7 Window.isKioskMode 
o 4.3.8 Window.zoomL evel 
o 4.3.9 Window.moveTo(x, y) 
o 4.3.10 Window.moveBy(x, y) 
o 4.3.11 Window.resizeTo(width, height) 
o 4.3.12 Window.resizeBy(width, height) 
o 4.3.13 Window.focus() 
o 4.3.14 Window.blur() 
o 4.3.15 Window.show() 
o 4.3.16 Window.hide() 
o 4.3.17 Window.close([force]) 
o 4.3.18 Window.reload() 
o 4.3.19 Window.reloadlgnoringCache() 
o 4.3.20 Window.maximize() 
o 4.3.21 Window.minimize() 
o 4.3.22 Window.restore() 
o 4.3.23 Window.enterFullscreen 


AAA 


) 


) 
o 4.3.25 Window.toggleFullscreen() 


o 4.3.26 Window.enterKioskMode() 
o 4.3.27 Window.leaveKioskMode() 


o 4.3.24 Window.leaveFullscreen 


AAA 


o 4.3.28 Window.toggleKioskMode() 
o 4.3.29 Window.showDevTools([id | iframe, headless]) 
o 4.3.30 Window.closeDevTools() 
o 4.3.31 Window.isDevToolsOpen() 
o 4.3.32 Window.setMaximumSize(width, height) 
o 4.3.33 Window.setMinimumsSize(width, height) 
o 4.3.34 Window.setResizable(Boolean resizable) 
o 4.3.35 Window.setAlwaysOnTop(Boolean top) 
o 4.3.36 Window.setPosition(String position) 
o 4.3.37 Window.setShowlnTaskbar(Boolean show) 
o 4.3.38 Window.requestAttention(Boolean attention) 
o 4.3.39 Window.capturePage(callback [, image format | config object ]) 
o 4.3.40 Window.cookies.* 
o 4.3.41 Window.eval(frame, script) 
e 4.4 window 事 件 
o 4.4.1 close 
o 4.4.2 closed 
o 4.4.3 loading 
o 4.4.4 loaded 
o 4.4.5 document-start 
o 4.4.6 document-end 
o 4.4.7 focus 
o 4.4.8 blur 
o 4.4.9 minimize 
o 4.4.10 restore 
o 4.4.11 maximize 
o 4.4.12 unmaximize 
o 4.4.13 move 
o 4.4.14 resize 
o 4.4.15 enter-fullscreen 
o 4.4.16 leave-fullscreen 
o 4.4.17 zoom 
o 4.4.18 capturepagedone 
o 4.4.19 devtools-opened 
o 4.4.20 devtools-closed 
o 4.4.21 new-win-policy 
e 4.5 存在 的 问题 


。 4.6 小 结 


4.1 window api 概述 


node-webkit 版 本 >= v0.3.0 才 支持 window api. 


Native GUI API 中 的 window 是 对 DOM 页 面 的 windows 的 一 个 封装 ， 扩 展 了 DOM window 的 操 
作 ， 同 时 可 以 接收 各 种 事件 。 


每 一 个 window 都 继承 了 node.js 中 的 EventEmitter 对 象 ， 你 可 以 使 用 Window.on(...) 的 方式 监 
听 native window 的 事件 。 


为 了 有 一 个 整体 上 的 认识 ， 和 上 一 篇 文章 (node-webkit 学 习 (3)Native UI APIR +) 一 样 ， 我 
们 先 做 一 个 小 例子 。 之 后 会 在 这 个 示例 的 基础 上 测试 window api 的 各 个 属性 和 方法 。 


先 创 建 windowdemo.html 和 package.json 文 件 。 


I| package.Json 


E| windowdemoa.html 





windowdemo.html 文 件 代 码 如 下 : 


«html» 
«head» 
«title2windowdemo«c/title-» 
«metahttp-equiv-z"Content-Type"content-z"text/html; charset-utf-8"/» 
</head> 
<body> 
«hi»window api 测试 </h1> 
<script> 
var gui = require('nw.gui'); 
var win = gui.Window.get(); 
win.on('minimize', function () { 
var element = document.createElement('div'); 
element ,appendchild(document .createTextNode( ' 窗 口 最 小 化 ' ) ) ; 
document.body.appendChild(element); 
3); 
win.minimize(); 
var new win - gui.Window.get( 
window.open('http://ebook.xuanhun521.com' ) 
); 
new win.on('focus', function () (1 
var element = document.createElement('div'); 
element .appendChild(document.createTextNode( 新 窗口 被 激活 ' ) ) ; 
document.body.appendChild(element); 
//Unlisten the minimize event 
win.removeAllListeners('minimize'); 
3); 
«/script» 
</body> 
</html> 


package.json 代 码 如 下 : 


"name": "window-demo'", 
"main": "windowdemo.html", 
"nodejs":true, 
"width":100, 


"height":200, 
"window": ( 


"title": "windowdemo'", 
"toolbar": true, 
"width": 800, 


"height": 600, 
"resizable":true, 

"show in taskbar":true, 
"frame":true, 
"kiosk":false 


}, 
"webkit":{ 
"plugin":true 


现在 我 们 简单 解释 下 windowdemo.html， 首 先 通过 


var gui 
var win 


require('nw.gui'); 
gui.wWindow.get(); 


获得 当前 窗口 对 象 win， 然 后 通过 下 面 的 代码 定义 了 窗口 最 小 化 事件 的 义理 函数 。 


win.on('minimize', function () ( 
var element - document. createElement('div'); 
element. ee O createTextNode( ' 窗 口 最 小 化 ' )); 
document.body.appendChild(element); 

3); 


当 窗 口 最 小 化 时 ， 在 当前 DOM 文 档 中 添加 一 个 div 元 素 ， 文 本 内 容 为 “窗口 最 小 化 ”。 
下 面 的 代码 示例 了 如 何 打开 一 个 新 窗口 。 


var new win = gui.Window.get( 
window.open('[http://ebook.xuanhunb521.com] (http: //ebook.xuanhun521.com/) ' ) 
): 


通过 类 似 的 方式 监听 新 窗口 的 获取 焦点 事件 。 


new win.on(' Toons function () { 
var element - document. createElement('div' 
element. "montes lost alere ER 新 窗口 被 激活 ' ) ) ; 
document.body.appendChild(element); 
//Unlisten the minimize event 


TON 


上 面 的 代码 中 通过 removeAlIListeners 国 数 ， 移 除了 主 窗 口 所 有 最 小 化 事件 的 义理 函数 。 


win.removeAllListeners('minimize'); 


古国 :616 | Rb 958 | 避让 六 [中国 | NA | 
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基本 的 获取 、 新 建 窗口 ， 创 建 和 移 除 事件 监听 阔 数 的 方式 ， 现 在 都 有 了 整体 上 的 认识 ， 下 面 
对 window 的 属性 和 方法 逐一 介绍 。 


4.2 获取 和 创建 窗口 


获取 和 创建 新 的 window 都 是 使 用 get 方 法 ， 在 上 面 的 示例 中 ， 已 经 演示 的 很 清楚 ， 无 参 的 get 
方法 获取 当前 窗口 对 象 。 


var win = gui.Window.get(); 


向 get 方 法 传 入 一 个 DOM window 对 象 ， 会 打开 新 的 窗口 。 


var new win = gui.Window.get( 
window.open('https://github.com') 
); 


获取 新 窗口 对 象 的 另 一 种 方法 是 ， 使 用 nw.gui.Window.open 方 法 。 


var win = gui.Window.open('[http://ebook.xuanhun521.com](http://ebook.xuanhun521.com/)', 
position: 'center', 
width: 901, 
height: 127 


3); 
-| 
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该 方法 传人 一 个 url， 可 选 的 配置 参数 ， 新 禄 体会 加 载 url。 在 最 新 版 本 的 node-webkit， 默 认 情 
况 下 新 打开 的 窗口 是 ; 入 有 被 激活 的 (未 获 取 焦 点 ) ,如 果 想 默认 获 取 焦 点 ， 可 以 在 在 配置 中 设 
置 "focus" 属 性 为 true， 如 下 : 


var win = gui.Window.open('[http://ebook.xuanhun521.com](http://ebook.xuanhun521.com/)', 
position: 'center', 
width: 901, 
height: 127, 
focus:true 


3): 
38b =-=- LA 


修改 windowdemo.html 如 下 ， 使 用 gui.Window.open 的 方式 打开 新 窗口 。 


«html» 
«head» 
«title2windowdemoc/title» 
«meta http-equiv-z"Content-Type" content-z'"text/html; charset-utf-8" /> 
«/head» 
«body > 
«hi»window api 测试 </h1> 
«script» 
var gui - require('nw.gui'); 
var win = gui.Window.get(); 
win.on('minimize', function () ( 
var element = document.createElement('div'); 
element .appendChild(document.createTextNode( ' 窗 口 最 小 化 ' ) ) ; 
document.body.appendChild(element); 
3): 
win.minimize(); 
//var new win = gui.Window.get( 
// window.open('[http://ebook.xuanhun521.com] (http: //ebook.xuanhun521.com/)' ) 
//)1 
var new win = gui.Window.open('[http://ebook.xuanhun521.com](http://ebook.xuanhun521. 
position: 'center', 
width: 901, 
height: 127, 
focus: true 
3); 
new win.on(' Uere function () 1 
var element = document. createElement('div'); 
element. ee createTextNode(' 新 窗口 被 激活 ' ) ) ; 
document.body.appendChild(element); 
//Unlisten the minimize event 
win.removeAllListeners('minimize'); 
1): 
</script> 
</body> 
</html> 
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4.3 window 对 象 属性 和 方法 


4.3.1 Window.window 


Window.window 属 性 获取 的 是 当前 DOM 文 档 中 的 window 对 象 。 


修改 windowdemo.html 内 容 如 下 : 


<html> 
<head> 
<title>windowdemo</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
</head> 
<body > 
«hi»window api 测试 </h1> 
<script> 
var gui = require('nw.gui'); 
var win = gui.Window.get(); 
if (win.window == window)// 比 较 是 否 为 DOM window 


var element = document.createElement('div'); 


element .appendChild(document.createTextNode( 'Window.window 和 DOM window 对 象 相同 ' ) ) ， 


document .body.appendChild(element); 


</script> 
</body> 
</html> 


— ii 


| 9 windowdemo 
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| Window window 和 DOM window 对 象 相 同 








4.3.2 Window.x/Window.y 


获取 或 者 设置 当前 窗口 在 当前 显示 屏幕 内 的 x/y 偏 移 。 
下 面 我 们 修改 windowdemo.html， 使 其 显示 后 移动 到 屏幕 的 左上 和 角 。 


var gui = require('nw.gui'); 
var win - gui.Window.get(); 
win.x = 0; 
win.y - 0; 


4.3.3 Window.width/Window.height 


获取 或 设置 当前 窗口 的 大 小 。 


修改 windowdemo.html 的 script 如 下 : 


«script» 

var gui - require('nw.gui'); 

var win = gui.Window.get(); 

var 站 = win.width; 

var windowHeight = win.height; 

if (win.window -- window) 

Í 
var element = document.createElement('div'); 
element.appendChild(document.createTextNode('nativeWidth:' + windowWidth )); 
document.body.appendChild(element); 


«/script» 


运行 结果 如 下 : 


B windowdems 
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4.3.4 Window.title 


获取 或 者 窗 体 的 标题 。 


到 目前 为 止 ， 有 两 个 地 方 可 以 设置 起 始 窗 体 的 标题 ，package.json 和 DOM 页 面 的 title。 
们 通过 Window .title 属 性 先 获取 再 修改 窗口 标题 。 


修改 后 的 页 面 内 容 为 : 


<html> 

<head> 

<title>windowdemo</title> 

«meta http-equiv="Content-Type" content="text/html; charset-utf-8" /> 
</head> 

<body > 

«hi»window api 测试 </h1> 


下 面 我 


«input type="button" value=" 修 改 窗口 标题 "id="btn_ChangeTitle" onclick="changeTitle()"/> 


<script> 
var gui = require('nw.gui'); 
var win = gui.Window.get(); 
var windowwidth = win.width; 
var windowHeight - win.height; 
if (win.window -- window) 
i 


var element = document.createElement('div'); 


element.appendChild(document.createTextNode('nativeWidth:' + windowWidth )); 


document.body.appendChild(element); 
$ 


function changeTitle() 


{ 
} 


</script> 
</body> 
</html> 


win.title = "ġa"; 


程序 启动 时 界面 如 下 : 
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native Width: 816 





所 击 “ 修 改 窗口 标题 "按钮 之 后 : 


C3 fileJ//C/Users/ADMINI- 1/AppData/Local/Temp/nw2304 21979/w 
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| 修改 窗口 标题 | 
native Width: 8 16 





4.3.5 Window.menu 


获取 或 设置 window 的 menubar。 会 在 menu 一 节 中 详细 介绍 。 


4.3.6 Window.isFullscreen 


获取 或 设置 是 否 以 全 屏 模 式 展 现 窗 体 。 如 果 程 序 启动 时 就 全 屏 显 示 ， 需 要 在 package.json 中 配 
E (参考 : http://www.xuanhun521.com/Blog/2014/4/10/node- 
WebkitYyE5Y%oADYoA6YoE49YoB9YoA029%oE59Y%o9FYoBAYoE69Y%o9CYoACYE7Y%oBBYo939oFE6%o9E9%o 
8496E59692968C96E99685968D96E796BD96AE) 


4.3.7 Window.isKioskMode 


获取 或 设置 是 否 启 用 KioskMode。 


4.3.8 Window.zoomLevel 


获取 或 者 设置 窗 体内 页 面 的 zoom 值 。 正 值 代 表 zoom in， 负 值 代表 zoom out, 


如 在 之 前 的 脚本 中 添加 


win.zoomLevel - 50; 


显示 效果 如 下 : 


windowdemo 


hile-///CUsers/ADMINI - 1/ÀppData/Lacal/Temp/nw9380 10832/windewdemo.htrl 








URR E 


win.zoomLevel = -50; 


效果 如 下 : 
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4.3.9 Window.moveTo(x, y) 
移动 窗口 到 指定 坐标 点 。 
4.3.10 Window.moveBy(x, y) 


以 当前 位 置 为 0 点 ， 移 动 Xy 距 离 。 


4.3.11 Window.resizeTo(width, height) 
重新 设置 窗口 大 小 。 
4.3.12 Window.resizeBy(width, height) 


以 当前 窗口 大 小 为 基准 ， 重 新 增加 指定 值 到 窗口 的 宽 高 。 


4.3.13 Window.focus() 


使 窗口 获取 焦点 。 

4.3.14 Window.blur() 

使 窗口 失去 焦点 

4.3.15 Window.show() 

显示 隐藏 的 窗口 。 在 某 些 平台 上 ，show 方 法 并 不 会 使 禄 口 获取 焦点 ， 如 果 你 想 在 窗口 显示 的 
同时 使 其 获取 和 焦点， 需要 调用 focus 方 法 。 


show(false) 和 Window.hide() 方 法 效果 一 样 。 


4.3.16 Window.hide() 


隐藏 窗口 。 


4.3.17 Window.close([force]) 


关闭 窗 体 。 可 以 通过 监听 close 事 件 ， 阻 止 窗 口 关 闭 。 但 是 如 果 force=true， 将 会 忽略 close 事 
件 的 监听 程序 。 


一 般 情 况 下 ， 我 们 会 在 程序 中 先 监 听 close 事 件 ， 在 事件 处 理 了 范 数 中 做 一 些 基本 工作 再 关闭 窗 
口 。 如 : 


win.on('close', function() { 
this. hide(); // Pretend to be closed already 
console.log("We're closing..."); 
this.close(true); 


V NOT 
4.3.18 Window.reload() 
重新 加 载 窗 口 。 


4.3.19 Window.reloadlgnoringCache() 


重新 加 载 窗 体 ， 强 制 刷新 缓存 。 


4.3.20 Window.maximize() 


大 化 


il 


窗口 


各 


4.3.21 Window.minimize() 


最 小 化 窗口 。 


4.3.22 Window.restore() 


恢复 窗口 到 上 一 状态 。 


4.3.23 Window.enterFullscreen() 


使 窗口 进入 全 屏 模 式 。 这 和 html5 的 FullScreen API 不 同 ，html5 可 以 使 页 面 的 一 部 分 全 屏 ， 该 


方法 只 能 使 整个 窗口 全 屏 。 


4.3.24 Window.leaveFullscreen() 


退出 全 屏 模 式 。 


4.3.25 Window.toggleFullscreen() 


切换 全 屏 模 式 。 


4.3.26 Window.enterKioskMode() 


进入 Kiosk 模 式 。Kiosk 模 式 使 应 用 人 全屏， 并 且 了 阻止 用 户 退 出 。 所 以 在 该 模式 下 必须 提供 退出 
Kiosk 模 式 的 途径 。 


4.3.27 Window.leaveKioskMode() 


退出 Kiosk 模 式 。 


4.3.28 Window.toggleKioskMode() 


切换 Kiosk 模 式 。 


4.3.29 Window.showDevTools([id | iframe, headless]) 


在 窗口 中 打开 开发 者 工具 。 


详情 参见 : https://github.com/rogerwang/node-webkit/wiki/Devtools-jail-feature 


4.3.30 Window.closeDevTools() 


关闭 开发 者 工具 。 


4.3.31 Window.isDevToolsOpen() 
返回 开发 者 工具 是 否 被 打开 的 状态 信息 
.33 Window.setMinimumSize(width, height) 


.34 Window.setResizable(Boolean resizable) 


3 
设置 窗口 是 否 可 以 被 重 置 大 小 。 


4.3.36 Window.setPosition(String position) 


移动 禄 体 到 指定 位 置 。 目 前 只 有 “center" 支 持 所 有 平台 ， 将 禄 口 移 动 到 屏幕 中 央 。 


4.3.37 Window.setShowlnTaskbar(Boolean show) 


设置 是 否 人 允许 在 任务 栏 显 示 图 标 。 


4.3.38 Window.requestAttention(Boolean attention) 


4.3.39 Window.capturePage(callback [, image format | 
config object ]) 


对 窗口 内 的 内 容 作 截图 。 我 们 通过 一 个 实例 来 理解 它 的 用 法 。 
新 建 html : 


«html» 

«head» 

«title2windowdemo«c/title-» 

«meta http-equiv-z"Content-Type" content-z'text/html; charset-utf-8" /> 
</head> 

<body style="background: #333"> 

«hi»window 测试 </h1> 


<script> 
var gui = require('nw.gui'); 
var win - gui.Window.get(); 


function takeSnapshot() { 
win.capturePage(function (img) (1 
var base6e4Data = img.replace(/^data:imageM/(png|jpgl|jpeg);baseo64,/, ""); 
require("fs").writeFile("out.png", base6e4Data, 'base64', function (err) { 
console.log(err); 
1) 
}, 'png'); 


«/script» 

«div style-"background: £123; width:100px; height:100px; border:1px solid #000"> 
«/div» 

«button onclick="takeSnapshot()"> 截 图 </button> 

</body> 

</html> 


在 上 面 的 代码 中 ， 调 用 win.capturePage 进 行规 图 ， 蕉 图 的 结果 会 传人 到 回调 函数 中 ， 传 人 的 
数据 是 base64 字 符 串 ， 程 序 通 过 require("fs").writeFile 方 法 将 图 片 输出 。 


运行 结果 如 下 : 


B windawdems 


(QU flegy//Cy Users/ADMINI- 1/AppData/Lacal/Temp/nu8502 23437/windewdenme. hmi 


Ez 


ERR 收 改 日 期 
| out.png 2014/4/ 


2014/4/ 


2014/4/ 


(I| package.Json 


€| windowdemo.html 
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// png as base64string 
win.capturePage(function(base64string)(t 

// do something with the base64string 
}, { format : 'png', datatype : 'raw') ); 
// png as node buffer 
win.capturePage(function(buffer)( 

// do something with the buffer 
), { format : 'png', datatype : 'buffer'?) ); 


配置 项 可 用 值 参 考 : 


format : "[jpeglpng]", 
datatype : "[raw|buffer|datauri]" 


默认 情况 下 ，format 值 为 jpeg，datatype 为 datauri。 


4.3.40 Window.cookies.* 


包含 一 些 列 处 理 cookie 的 方法 。 这 些 api 的 定义 方式 和 chrome 扩 展 相 同 。node-webkit 文 持 get, 
getAll, remove 和 set 方法 ; onChanged 事件 (该 事件 支持 支持 both addListener 和 
removeListener 方法 )。 


和 CookieStore 有 关 的 扩展 api 不 被 支持 ， 因 为 node-webkit 只 有 一 个 全 局 的 cookie 和 存储。 


4.3.41 Window.eval(frame, script) 


在 目标 window 或 者 iframe 中 执行 javascript 代 码 段 。script 参 数 是 要 执行 的 javascript 代 码 。 


4.4 window 事 件 


本 节 介 绍 的 事件 ， 都 可 以 通过 Window.on() 方 法 进行 监听 ， 更 多 接收 事件 相关 内 容 参 考 node.js 
文档 ， EventEmitter。 


4.4.1 close 


关闭 窗口 事件 。 参 考 上 文 window.close() 方 法 。 


4.4.2 closed 


窗口 天 闭 完毕 事件 。 正 常情 况 下 在 同一 窗 体 内 是 无 法 监听 此 事件 的 ， 以 为 窗口 已 经 天 闭 ， 所 
javascript 对 象 都 被 释放 掉 了 。 


但 是 我 们 可 以 通过 在 另 一 窗口 ， 监 听 被 天 闭 窗口 的 已 天 闭 事 件 。 如 : 


«script» 

var gui - require('nw.gui'); 

//var new win = gui.Window.get( 

// window.open('http://ebook.xuanhun521.com' ) 

//)1 

var new win = gui.Window.open('http://ebook.xuanhunb21.com', ( 
position: 'center', 
width: 901, 
height: 127, 
focus: true 

3): 

new win.on(' edge, function () 1 
var element - - document. createElement('div'); 
element .appendChild(document.createTextNode( ' 新 窗口 已 经 天 闭 ' ) ) ; 
document.body.appendChild(element); 

3): 


</script> 


在 当前 窗 体 上 监听 新 建 窗 体 的 已 天 闭 事 件 ， 天 闭 新 窗口 后 的 显示 结果 : 














I L MALLI NI ANETE — MRLILERA REL 一 一 一 一 一 一 一 
lh windowdemo -一 à l = | 四 met 
| Q fe vers/ADMINI- 1/AppData/Local/Temp/nw10272. 21474/windewdemo.btmi = (0 | 


window - "e 


RERBA ERE E ATA 
| 新 窗口 已 经 关闭 


4.4.3 loading 


ai LEES S T6 Rr BUR UE, 
该 事件 只 能 在 刷新 窗口 或 者 在 其 他 窗口 中 监听 。 


4.4.4 loaded 


窗口 初始 化 完毕 。 


4.4.5 document-start 


function (frame) {} 


窗 体 中 的 document 对 象 或 者 iframe 中 的 css 文 件 都 加 载 完毕 ，DOM 元 素 还 未 开始 演 染 ， 
javascript 代 码 还 未 执行 ， 触 发 此 事件 。 


监听 事件 的 函 效 会 接收 一 个 frame 参 数 ， 值 为 具体 的 iframe 对 象 或 者 为 null。 


读者 可 同时 参考 node webkit 学 习 (2) 基 本 结构 和 配置 中 的 inject-js-start 
4.4.6 document-end 

function (frame) {} 
文档 加 载 完 毕 触发 的 事件 。 


4.4.7 focus 


4.4.9 minimize 


窗口 最 小 化 事件 。 


4.4.10 restore 


当 禄 口 从 最 小 化 重 置 到 上 一 状态 时 触发 的 事件 。 


4.4.11 maximize 


窗口 最 大 化 事件 。 


4.4.12 unmaximize 


f DM CA EA s ER ELI UZ BUSH As p RR Ae BIER AE, 


4.4.13 move 


f O RI a ia SL BUR E, 


事件 义理 函数 应 该 接收 两 个 参数 (xy)， 是 窗口 的 新 位 置 。 


4.4.14 resize 


E SAUBER ERR BERE, 
事件 监听 的 回调 范 数 搂 收 两 个 参数 (width,height)， 窗 口 的 新 大 小 。 


4.4.15 enter-fullscreen 


窗口 进入 全 屏 模 式 时 触发 的 事件 。 


4.4.16 leave-fullscreen 


退出 全 屏 模式 时 触发 的 事件 。 


4.4.17 zoom 

当 窗 体 中 文档 发 生 zooming 时 触发 的 事件 ， 带 有 zoomlevel 参 数 ， 参 见 上 文 的 window.zoom 属 
性 。 

4.4.18 capturepagedone 

RATER H, ERAT E BUB Ex Window.capturePageES2& B5[m] 33 ER 2 B^] 2 
定义 。 

4.4.19 devtools-opened 


开发 者 工具 修 打 开 触 发 的 事件 。 
事件 的 回调 函数 接收 一 个 url 参 效 ， 是 打开 开发 者 工具 的 窗口 地 址 。 


4.4.20 devtools-closed 


开发 者 工具 被 天 闭 时 触发 的 事件 。 


4.4.21 new-win-policy 


当 一 个 新 窗口 被 从 当前 究 口 打开 ， 或 者 打开 一 个 iframe 时 触发 该 事件 。 


function (frame, url, policy) {} 


e frame 发 起 请 求 的 子 iframe， 如 果 从 顶层 窗口 中 发 起 的 请 求 ， 该 值 为 null 
o url 请求 的 地 址 
© policy 带 有 以 下 方法 的 对 象 

o ignore() : 忽略 请 求 。 

o forceCurrent() :强制 在 同一 fame 中 打开 链接 

o forceDownload() : 强制 链接 被 下 载 或 者 在 其 他 应 用 中 打开 

o forceNewWindow() : 强制 在 新 窗口 中 打开 链接 

o forceNewPopup() : 强制 在 新 的 popup window 中 打开 链接 


4.5 存在 的 问题 


在 linux 下 ， setMaximumSize()/setMinimumSize() 和 setResizable() 方法 不 能 被 同时 使 用 。 


4.6 小 结 


本 文 内 容 主 要 参考 node-webkit 的 官方 天 文 文档 (https://github.com/rogerwang/node- 
webkit/wiki/Window) . 


下 一 篇 文章 ， 介 绍 Frameless window. 


node-webkit 教 程 (5)Native UI API 之 Frameless 
window 


作者 : A 


来 源 : nnode-webkit 教 程 (5)Native UI API x Frameless window 


5.1 Frameless window 概述 


Frameless window， 是 没有 操作 系统 默认 样式 的 边框 的 窗口 ， 也 就 意味 着 最 大 、 最 小 和 关闭 
按钮 也 访问 不 到 ， 同 时 默认 情况 下 窗口 不 能 被 拖 搜 。 


在 node webkit 学 习 (2) 基 本 结构 和 配置 一 文中 ， 介 绍 frame 属 性 时 ， 给 出 了 一 个 简单 示例 ， 本 
篇 文章 以 该 示例 为 基础 进行 扩展 。 


Frameless window 的 使 用 场景 ， 通 音 是 我 们 需要 目 定 义 标 题 栏 ， 窗 口 边 框 样式 和 搜 钮 的 时 
候 。 


首先 创建 示例 程序 文件 ，framelessDemo.html 和 package.json。 


framelessDemo.html 代 码 如 下 : 


<html> 
<head> 
<title>frame less windowdemo</title> 
«meta http-equiv="Content-Type" content="text/html; charset-utf-8" /> 
</head> 
<body > 
<h1>frameless window 测试 </h1> 
<script> 

var gui = require('nw.gui'); 
«/script» 
</body> 
</html> 


package.json 内 容 如 下 : 


"name": "framelesswindow-demo", 
"main": "framelessDemo.html", 
"nodejs":true, 

"window": ( 


"title": " framelesswindow-demo ", 
"toolbar": true, 
"width": 800, 


"height": 600, 
"resizable":true, 

"show in taskbar":true, 
"frame":false, 
"kiosk":false 


}, 
"webkit":{ 
"plugin":true 


运行 程序 ， 效 果 如 下 : 


Qu filey//CyUsers/ADMINI- 1/AppData/Local/Temp/mw6268 32358/framelessDema.html 


frameless window 测试 





此 时 窗口 无 边框 ， 无 标题 栏 ， 不 能 拖 搜 。 


5.2 如 们 启用 无 边框 窗口 


注意 package.json 中 window 的 配置 ， 将 字段 frame 设置 为 false 即 可 。 


"window": ( 
"frame": false 
} 


} 


5.3 窗口 拖 搜 


默认 情况 下 ， 无 框 窗口 是 不 可 抑 搜 的 ， 可 以 通过 给 body 添 加 "-webkit-app-region': drag" 4€ xX, 
来 启用 拖 搜 。 


如 果 在 body 上 设置 了 拖 扫 ， 需 要 在 button 上 去 除 拖 搜 ， 否 则 按钮 无 法 点 击 ， 添 加 如 下 样式 : 


button { 
-webkit-app-region: no-drag; 
j 


如 果 你 信 仅 使 用 自 定 义 titlebar 组 件 ， 也 需要 设置 在 titlebar 中 的 按钮 no-drag。 


5.4 窗口 操作 


在 无 框 窗 口中 ， 我 们 仍然 需要 使 用 户 能 够 进行 最 大 、 最 小 ， 天 闭 窗口 等 操作 。 
首先 我 们 可 以 使 用 javascript 中 的 window 对 象 来 关闭 窗口 。 


因为 node-webkit 有 window 对 象 ， 使 用 window api 是 我 们 的 首选 ， 详 见 : node-webkit 学 习 
(4)Native UI API 之 window (http://www.xuanhun521.com/Blog/2014/4/14/node- 
webkit%E5%AD%A6%E4%B9%Ao4native-ui-api-%E4%B9%8Bwindow) 


5.5 推荐 demo 


demo 地 址 : https://github.com/zcbenz/nw-sample-apps/tree/master/frameless-window。 


这 个 示例 演示 了 使 用 frameless window 时 ， 如 何 目 定 义 实 现 所 有 标准 窗口 的 功能 。 


Top Titlebar 


Select the titlebar to enable: 
(vf Top Titlebar 
(vf Bottom Titlebar 

Left Titlebar 

Right Titlebar 


| Close Window | 


Bottom Titlebar 





5.6 小 结 


本 文 内 容 主 要 参考 node-webkit 的 官方 沁 文 文档 (https://github.com/rogerwang/node- 
webkit/wiki/Frameless-window) 。 


下 一 篇 文章 ， 介 绍 menu。 


node-webkit 教 程 (6)Native UI API 之 Menu( 菜 单 ) 


作者 XR 


来 源 : node-webkit 教 程 (6)Native UI API 之 Menu( 菜 单 ) 


E x 


e 6.1 Menu 概述 
e 6.2 menu api 
o 6.2.1 new Menu([option]) 
o 6.2.2 Menu.items 
o 6.2.3 Menu.items.length 
o 6.2.4 Menu.items[i] 
o 6.2.5 Menu.append(Menultem item) 
o 6.2.6 Menu.insert(Menultem item, int i) 
o 6.2.7 Menu.remove(Menultem item) 
o 6.2.8 Menu.removeAt(int i) 
o 6.2.9 Menu.item[x].click 
o 6.2.10 Menu.popup(int x, int y) 
e 6.3 创建 右键 菜单 
e 6.4 Menultem 
o 6.4.1 new Menultem(option) 
o 6.4.2 Menultem.type 
o 6.4.3 Menultem.label 
o 6.4.4 Menultem.icon 
o 6.4.5 Menultem.tooltip 
o 6.4.6 Menultem.checked 
o 6.4.7 Menultem.enabled 
o 6.4.8 Menultem.submenu 
o 6.4.9 Menultem.click 
e 6.6 小 结 


6.1 Menu 概述 


Menu API 提供 的 是 本 地 化 的 窗口 菜单 ， 即 windows 下 常 说 的 菜单 栏 ， 定 义 的 菜单 显示 在 本 地 
化 (native) window 上 ， 而 不 是 属于 DOM 文 档 。 参 考 : node-webkit 学 习 (4)Native UI API 之 
window 


Menu 分 为 两 种 ，window 菜 单 和 上 下 文 (右键 ) 菜单 (context menu) 。 


创建 menu 对 象 使 用 构造 画 数 Menu([option])， 如 : 


// Load native UI library 
var gui - require('nw.gui'); 
// Create an empty menu 

var menu - new gui.Menu(); 


不 带 参 数 构造 的 menu 属 于 context menu， 如 果 想 创建 window menu， 使 用 如 下 方式 : 


var your menu = new gui.Menu(( type: 'menubar' }); 


将 window menu E ii,4á 2: window 对 象 的 menu 属 性 即 可 生效 。 


gui.window.get().menu = your menu; 


创建 nenuDemo.html 和 package.json。menuDemo.html 代 码 如 下 : 


«html» 
«head» 
«title»menuDemoc/title- 
«meta http-equiv-"Content-Type" content-z'"text/html; charset-utf-8" /> 
</head> 
<body > 
<h1>menu api 测试 </h1> 
«script» 
// Load native UI library 
var gui - require('nw.gui'); 
var win = gui.Window.get(); 
/ / &jjS&window menu 
var windowMenu = new gui.Menu(( type: 'menubar' }); 
var windowSubmenu - new gui.Menu(); 
var subMenuItem = new gui.MenuItem(( label: ' 子 菜单 项 ' 3); 
windowSubmenu.append(subMenuItem); 
windowMenu.append( 
new gui.MenuItem(( label: ' 子 菜单 '， submenu: windowSubmenu )) 
); 
win.menu = windowMenu; 
// Create an empty menu 
var menu = new gui.Menu(); 
// Add some items 
menu.append(new gui.MenuItem(( label: 'Item A' })); 
menu.append(new gui.MenuItem(( label: 'Item B' j)); 
menu.append(new gui.MenuItem(( type: 'separator' })); 
menu.append(new gui.MenuItem(( label: 'Item C' j)); 
// Remove one item 
menu.removeAt(1); 
// Popup as context menu 
menu.popup(10, 10); 
// Iterate menu's items 
for (var i = 0; i < menu.items.length; ++i) { 
var element = document.createElement('div'); 
element.appendChild(document.createTextNode(menu.items[i].label)); 
document.body.appendChild(element); 
j 
</script> 
</body> 
</html> 


package.json 文 件 内 容 如 下 : 


"name": "menu-demo", 

"main": "menuDemo.html", 

"nodejs":true, 

"width":100, 

"height":200, 

"window": ( 
"title": "MenuDemo'", 
"toolbar": true, 
"width": 800, 
"height": 600, 
"resizable":true, 
"show in taskbar":true, 
"frame":true, 
"kiosk":false 

}, 

"webkit":{ 
"plugin":true 

j; 
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6.2 menu api 


6.2.1 new Menu([option]) 


构造 图 数 ， 见 上 文 。 


6.2.2 Menu.items 


获取 该 Menu 下 所 有 的 Menultem 对 象 ， 返 回 结果 为 数组 。 上 文中 的 例子 ， 有 这 样 的 代码 : 


for (var i = 0; i < menu.items.length; ++i) ( 
var element = document.createElement('div'); 
element.appendChild(document.createTextNode(menu.items[i].label)); 
document.body.appendChild(element); 


上 面 的 代码 通过 menu.items 获 取 所 有 menuitem 对 象 ， 通 万 输出 label。 这 里 需要 注意 的 是 ， 并 
不 是 所 有 的 menuitem 都 有 label 属 性 。 


6.2.3 Menu.items.length 


menuitem 的 个 数 。 参 加 上 文 demo。 


6.2.4 Menu.items[i] 


通过 索引 返回 一 个 menuitem 对 象 。 


6.2.5 Menu.append(Menultem item) 


向 当前 菜单 中 添加 一 个 menuitem 对 象 ， 该 对 象 在 整个 menuitem 集 合 的 尾部 。 


6.2.6 Menu.insert(Menultem item, int i) 


在 menuitem 集 合 的 指定 位 置 插入 一 个 menuitem 对 象 。 


6.2.7 Menu.remove(Menultem item) 


)kmenuitemS& & rhe E& — T menuitem x1 2& , 


6.2.8 Menu.removeAt(int i) 


删除 menuitem 集 合 中 指定 位 置 的 menuitem 对 象 。 


6.2.9 Menu.item[x].click 


设置 menuitem 人 集合 中 指定 位 置 的 menuitem 对 象 的 click 事 件 ， 在 menuDemo.html 中 添加 如 下 
代码 : 


menu.items[O0]. PLUK = = function() { 
var element = document.createElement('div' 
element.appendChild(document. eU RM E 我 被 点 击 了 ) )， 
document.body.appendChild(element); 

}; 
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6.2.10 Menu.popup(int x, int y) 


在 当前 窗口 的 指定 位 转 弹 窗 六 单 。 示 例 代 码 见 上 文 。 


6.3 创建 右键 采 单 


创建 右键 菜单 ， 需 要 在 页 面 监听 contextmenu 事件 ， 然 后 控制 弹出 菜单 。 修 改 之 前 的 菜单 弹 
出 代码 : 


document.body.addEventListener('contextmenu', function (ev) { 
ev.preventDefault(); 
menu.popup(10, 10); 
return false; 
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启动 时 页 面 如 下 : 


menuDemo 
zm 
(QI fle///C:JUsers/ADMINI-1/AppData/Local/Temp/nw13640 16251/menuDemo.html 


menu api 测试 


Item A 
undefined 
Item C 


单 击 右键 后 ， 界 面 显 示 菜 单 : 


Enc mim "m himi tin 


e maenubemoa 
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| Item C 
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6.4 Menultem 


从 上 面 的 叙述 中 ， 我 们 已 经 知道 ，menu 和 menuitem 的 一 起 组 合 ， 才 能 最 终 组 成 界面 上 的 菜 
单 。 到 目前 为 止 ， 我 们 已 经 基本 了 解 了 menuitem 的 基本 使 用 方法 ， 下 面 根据 api 文 档 ， 详 细 介 
绍 属性 、 方 法 和 事件 。 


6.4.1 new Menultem(option) 


4l 515— T Menuitemx1Zs, ErhRoptionzé— T 128, g label, icon, tooltip, type, click, 
checked, enabled 和 submenu 这 些 字 段 。 这 些 子 段 都 具有 自己 的 属性 ， 下 面 分 别 叙 述 。 


6.4.2 Menultem.type 


获取 一 个 menuitem 的 类 别 信息 ， 到 目前 为 止 有 三 类 menuitem， 分 别 为 separator checkbox 


和 normal。 


normal 和 separator 类 型 的 menuitem 我 们 都 已 经 在 上 面 的 示例 中 见 到 ， 下 面 我 们 添加 一 个 
checkbox 类 型 的 menuitem。 


menu.append(new gui.Menultem({ label: "请 选择 ',type:'checkbox' })); 


结果 如 下 : 
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| 请 选择 


需要 注意 的 是 ，type 字 段 只 能 在 初始 化 时 设 定 ， 在 运行 时 是 不 能 修改 menuitem 的 类 型 的 。 


6.4.3 Menultem.label 


获取 或 设置 menuitem 的 label 值 ， 目 前 只 支持 纯 文 本 。 


6.4.4 Menultem.icon 


菜单 的 图 标 ， 文 持 app 内 部 的 相对 路 径 和 系统 路 径 。sepatater 类 型 的 menuitem 不 支持 icon 属 
性 。 只 支持 png 格 式 的 图 片 。 


修改 sumMenultem， 为 它 添 加 icon : 


var subMenultem = new gui.Menultem({ label: ' 子 菜单 项 ", icon: '2655716405282662783.png' 
})); 


效果 如 下 : 


Ed menubLlemo 
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undefined 
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6.4.5 Menultem.tooltip 


或 者 或 者 设置 tooltip 字 段 。 所 谓 tooltip 融 是 当 鼠 标 滑 动 到 菜单 上 显示 的 文本 信息 ， 类 似 于 DOM 
元 素 中 的 title。 


下 面 我 们 继续 修改 subMenultem， 为 其 添加 tooltip : 


var subMenuItem = new gui.MenuItem({ 
label: ' 子 菜单 项 '， 
icon: '2655716405282662783.png', 
tooltip: ' 我 是 帅气 的 子 菜单 " 

2) 


很 不 幸 ， 在 我 的 windows 7 机 器 上 ，tooltip 无 法 显示 。 在 ubuntu 上 ，menubar 是 显示 在 全 局 菜 
单 上 ， 看 起 来 有 点 怪异 : 
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6.4.6 Menultem.checked 


获取 或 设置 menuitem 是 否 被 选中 。 


6.4.7 Menultem.enabled 


获取 或 者 menuitem 的 enaled 属 性 ，enabled 设 置 为 false 的 menuitem 不 可 被 选中 。 


6.4.8 Menultem.submenu 


获取 或 者 是 子 菜单 。 可 以 参考 本 文 的 示例 。 


6.4.9 Menultem.click 


获取 或 设置 click 事 件 的 回调 函数 。 


nw.js 中 文 文档 


6.6 小 结 


本 文 内 容 主 要 参考 node-webkit 的 官方 天 文 文档 (https://github.com/rogerwang/node- 
webkit/wiki/Menu, https://github.com/rogerwang/node- 
webkit/wiki/Menultem, https://github.com/rogerwang/node-webkit/wiki/Window-menu) 。 


F—m X3, fr2aPlatform Services, 


node-webkit 教 程 (6)Native UI API 之 Menu( 菜 单 ) 


Ps: 


node-webkit 教 程 (7)Platform Service 之 APP 


作者 Ah 
来 源 : node-webkit 教 程 (7)Platform Service 之 APP 
从 本 篇 文章 开始 ， 为 您 介绍 Platform Services 些 列 的 API， 本 系列 由 以 下 类 别 : 


e App 一 每 个 应 用 运行 时 全 局 api 

e Clipboard — 剪贴 板 

e Tray- 状态 栏 图 标 ， 消 息 通知 

e File dialogs- 文 件 选择 对 话 框 

e Shell — 桌面 相关 

e Handling files and arguments- 处 理 文件 和 相关 参数 


7.1 APP 概述 


APP 类 别 的 API 是 针对 当前 正在 运行 的 应 用 程序 实例 的 ， 换 个 说 法 是 进程 级 别 的 (这 样 说 还 不 
准确 ，node-webkit 每 一 个 窗口 在 单独 进程 中 ， 应 用 本 身 是 多 进程 的 ) 。 这 些 API 和 程序 的 启 
动 、 关 闭关 系 最 密切 。 但 是 从 目前 文档 中 的 AP| 来 看 ，APP 类 别 的 APl 显 得 不 是 很 丰富 。 


新 建 appDemo.html 和 package.json 文 件 。 


package.json 内 容 如 下 : 
{ 
"name": "app-demo", 
"main": "appDemo.html", 


"nodejs":true, 

"window": ( 
"title": "appDemo", 
"toolbar": true, 
"width": 800, 
"height": 600, 
"resizable":true, 
"show in taskbar":true, 
"frame":true, 
"kiosk":false, 
"icon": "2655716405282662783.png", 


"webkit":( 
"plugin":true 


appDemo.html 内 容 如 下 : 


«html» 
«head» 
«title2appDemoc/title» 
«meta http-equiv-z"Content-Type" content-z'text/html; charset-utf-8" /> 
</head> 
<body > 
<h1>app api 测试 </h1> 
<script> 
// Load native UI library 


var gui = require('nw.gui'); 
var win = gui.Window.get(); 
</script> 
</body> 
</html> 


7.1 i KRRAPP x12 
通过 如 下 方式 获得 APP 对 象 : 


// Load native UI library 
var gui require('nw.gui'); 
var app gui.App; 


7.2 获取 命令 行 参 数 


很 多 时 候 ， 我 们 启动 程序 需要 从 命 合 行 输入 参数 ， 可 以 通过 argv、fullArgv 和 filteredArgv 获 取 
输入 参数 。 关 于 三 者 的 区 别 参 考 : https://github.com/rogerwang/node- 
webkit/wiki/App#fullargv。 我 的 测试 结果 和 文档 还 是 有 出 入 的 。 


修改 appDemo.html 如 下 : 


«html» 
«head» 
«title2appDemoc/title» 
«meta http-equiv-"Content-Type" content-z'"text/html; charset-utf-8" /> 
</head> 
<body > 
<h1>app api 测试 </h1> 
<script> 
// Load native UI library 
var gui = require('nw.gui'); 
var app = gui.App; 
apendText(app.argv); 
apendText(app.fullArgv); 
apendText(app.filteredArgv); 
function apendText(text) 
{ 
var element = document.createElement('div'); 
element.appendChild(document.createTextNode(text)); 
document.body.appendChild(element); 


</script> 
</body> 
</html> 


在 命令 行 启 动 程序 : 
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appDemo 
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7.3 dataPath 


应 用 的 数据 存储 目录 ， 在 不 同 的 操作 系统 上 路 径 不 同 ， 
e WindOWS: %LOCALAPPDATA%/<name> 
e Linux: -/.config/«name» ; 


e OSX: -/Library/Application Support/«name» 
这 里 的 «name» 是 在 package.json 中 定义 的 name 字 段 的 值 ， 所 以 需要 在 定义 name 值 的 时 候 保 
证 全 局 唯一 。 


7.4 获取 manifest 


使 用 manifest 属 性 ， 可 以 获取 package.json 中 的 json 对 象 。 修 改 appDemo。html 的 脚本 内 容 如 
MN: 


«script» 
// Load native UI library 
var gui - require('nw.gui'); 
var app - gui.App; 
var manifest - app.manifest; 
apendText(manifest.name); 
function apendText(text) 


var element = document.createElement('div'); 
element.appendChild(document.createTextNode(text)); 
document.body.appendChild(element); 


«/script» 


结果 如 下 : 


e file:///C:/Users/ADMINI- 1/AppData/Local/Temp/nw10528 31118/app.html 
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app-demo 





7.5 清除 缓存 


可 以 调用 clearCache() 方 法 ， 清 除 应 用 在 内 存 和 磁盘 上 的 缓存 。 


7.6 天 闭 程序 


关闭 程序 有 两 个 函数 可 以 调用 ， 分 别 为 closeAllWindows() 和 quit() 方 法 ， 两 者 的 区 别 在 于 
closeAllWindows() 方 法 会 发 送 窗口 的 关闭 消息 ， 我 们 可 以 监听 close 事 件 ( 参 

考 : http://www.xuanhun521.com/Blog/2014/4/14/node- 
webkit96E596AD96A696E496B996AO04native-ui-api-96E496B9968Bwindow) ， 阻 止 窗口 关闭 或 
者 做 其 他 日 志 等 工作 。quit() 方 法 不 会 发 送 任何 消息 ， 直 接 退 出 程序 。 


717.7 Crash dump 


从 node-webkit 0.8.0 55 7k 3T 328, WRAHA, — T minidump 文件 会 被 保存 到 人 磁盘， 用 以 调 
试 和 寻找 程序 月 溃 的 原因 。 上 默认 情况 下 ，dump 文 件 保存 在 系统 的 临时 文件 夹 中 ， 我 们 也 可 以 
通过 api 来 设置 dump 文 件 的 存放 目录 。 以 下 是 个 版 本 系统 的 临时 目录 : 


e Linux: /tmp 
e Windows: System temporary directory 


e Mac: -/Library/Breakpad/product name (product name is defined in .plist file in the 
application bundle) 


为 了 方便 测试 ，node-webkit 提 供 了 App.crashBrowser() 和 App.crashRenderer() 两 个 api， 分 别 
保存 browser 进程 和 render 进 程 的 数据 。 下 面 我 们 通过 实例 演示 将 dump 文 件 保存 到 本 地 磁 色 
D。 


<script> 
// Load native UI library 
var gui = require('nw.gui'); 
var app = gui.App; 
app.setCrashDumpDir('d:NN' );//ikiBAz EE X 
app.crashBrowser(); 
app.crashRenderer(); 
function apendText(text) 


{ 
var element = document.createElement('div'); 
element.appendChild(document.createTextNode(text)); 
document.body.appendChild(element); 
j 
</script> 


运行 程序 ， 应 用 和 启动 后 会 裔 溃 退 出 ， 在 D 盘 会 看 到 转 储 文件 : 


JE Gel Fb ELH LTD LUZ 
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2014/4/17 15:1 





2012/9/7 18:16 


如 何 查 看 转 储 文件 ， 这 里 就 不 详细 介绍 了 ， 会 在 专门 的 文章 中 讲解 ， 读 者 现在 可 以 参考 文档 
中 的 链接 : 


Decoding the stack trace 


To extract the stack trace from the minidump file, you need the minidump_stackwalk tool, 
symbols file of node-webkit binary and the minidump (.dmp) file generated from the crash. 


oee http://www.chromium.org/developers/decoding-crash-dumps 


http://code.google.com/p/google-breakpad/wiki/GettingStartedWithBreakpad 


Symbols file of official node-webkit binary is provided staring from 0.8.0. It can be 
downloaded from: 


Resources 


Linux symbol files of breakpad 
https://s3.amazonaws.com/node-webkit/v0.8.0/nw.breakpad.ia32.gz 
https://s3.amazonaws.com/node-webkit/v0.8.0/nw.breakpad.x64.gz 
windows pdb file 
https://s3.amazonaws.com/node-webkit/v0.8.0/nw.exe.pdb.zip 

mac dSYM files 


https://s3.amazonaws.com/node-webkit/v0.8.0/node-webkit-osx-dsym-v0.8.0.tar.gz 


7.8 获取 代理 


使 用 getProxyForURL(url)， 可 以 获得 加 载 该 url 时 使 用 的 代理 信息 。 返 回 值 使 用 PAC 格 式 CA 
考 : http://en.wikipedia.org/wiki/Proxy auto-config) 。 


7.9 小 结 


本 文 内 容 主 要 参考 node-webkit 的 官方 英文 文档 ， 做 了 适当 的 调整 
(https://github.com/rogerwang/node-webkit/wiki/App, 
https://github.com/rogerwang/node-webkit/wiki/Crash-dump) 。 


下 一 篇 文章 ， 介 绍 Clipboard。 


node-webkit 教 程 (8)Platform Service 之 
Clipboard 


作者 XR 


来 源 : node-webkit 教 程 (8)Platform Service;Z Clipboard 


e 8.1 Clipboard 操作 
e 8.6 小 结 

和 = 
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8.1 Clipboard 操作 


Clipboardzé x18 F2 Zr S3 NR B] — 38828, EL BU ELS ER BURNER IB ALKAR. 
新 建 clip.html 和 package.json。 


clip.html 内 容 如 下 : 


«html» 
«head» 
«title2appDemoc/title» 
«meta http-equiv-z"Content-Type" content-z'text/html; charset-utf-8" /> 
</head> 
<body > 
<h1>app api 测试 </h1> 
«button onclick="getText()"> 获 取 内 容 </button> 
«button onclick="setText()"> 写 入 内 容 </button> 
«button onclick="clearText()"> 清 除 内 容 </button> 
<script> 
var gui = require('nw.gui'); 
// We can not create a clipboard, we have to receive the system clipboard 
var clipboard - gui.Clipboard.get(); 
function apendText(text) { 
var element = document.createElement('div'); 
element.appendChild(document.createTextNode(text)); 
document.body.appendChild(element); 
j 


function clearText() 


// And clear it! 

clipboard.clear(); 

apendText ( ' SERE TRAE EUBES ); 
j 


function setText() 


// Or write something 
clipboard,set(' 这 是 node-webkit 向 剪贴 板 写 的 内 容 '，'text ' ) ; 


function getText() 


// Read from clipboard 
var text - clipboard.get('text'); 
apendText(text); 


«/script» 
</body> 
</html> 
package.json 内 容 如 下 : 
"name": "clip-demo", 
"main": "clip.html", 


"nodejs":true, 
"window": ( 


"title": "clipDemo", 
"toolbar": true, 
"width": 800, 


"height": 600, 

"resizable":true, 

"show in taskbar":true, 
"frame":true, 

"kiosk":false, 

"icon": "2655716405282662783.png" 


) 

"webkit":( 
"plugin":true 

} 


示例 代码 准备 完毕 之 后 ， 我 们 打开 程序 ， 如 图 : 








程序 有 三 个 按钮 ， 分 别 是 获取 、 写 入 和 清除 剪 贴 板 内 容 。 在 操作 剪贴 板 之 前 ， 我 们 需要 先 获 
取 clipboard 对 象 : 


var clipboard = gui.Clipboard.get(); 


现在 我 们 先 单 击 第 二 个 按钮 ， 向 剪贴 板 写 和 内容， 代码 如 下 : 


function setText() 


{ 
// Or write something 
clipboard.set(' 这 是 node-webkit 向 剪贴 板 写 的 内 容 '，'text' )，; 
} 
clipboard.set 方 法 接收 两 个 参数 ， 第 一 个 参数 是 要 写 入 的 内 容 ， 第 二 个 参数 是 内 容 类 型 ， 目 前 
只 支持 text 类 型 。 


是 否 写 入 成 功 了 呢 ?我 们 再 单 击 第 一 个 按钮 ， 事 件 处 理 代码 如 下 : 


function getText() 
// Read from clipboard 


var text - clipboard.get('text'); 
apendText(text); 


第 一 个 按钮 通过 clipboard.get 方 法 获取 剪贴 板 内 容 然 后 输出 ，get 方 法 接收 一 个 参数 ， 指 明 内 
容 类 型 ， 目 前 只 支持 text 类 型 。 na 获取 都 成 功 ， 会 出 现 如 下 界面 : 


+ appDemo 


C3 fileJ//C/Users/ADMINI-1/AppData/Local/Temp/nw10228 25921/q 
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下 面 我 们 再 看 清楚 内 容 的 按钮 做 了 什么 : 


function clearText() 


// And clear it! 
clipboard.clear(); 
apendText ( ' SERERE GUSER' ); 


调用 了 clipboard.clear() 方 法 ， 清 除 和 剪贴 板 ， 想 要 验证 是 否 清除 成 功 ， 只 需 再 次 点 击 获取 内 容 
按钮 ， 看 是 否 有 内 容 输出 即 可 。 


C fileJ//C/Users/ADMINI-1/AppData/Local/Temp/nw10228 259217clip,hi 
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8.6 小 结 


本 文 内 容 主 要 参考 node-webkit 的 官方 英文 文 档 ， 做 了 适当 的 调整 
(https://github.com/rogerwang/node-webkit/wiki/Clipboard) 。 


下 一 篇 文章 ， 介 绍 Tray。 


node-webkit 教 程 (9)native api <x Tray(1& & ) 


作者 XR 


来 源 : node-webkit 教 程 (9)native api x Tray(TE & ) 


E x 


e 9.1 Tray 简介 

e 9.2 tray 的 属性 

e 9.3 tray 的 构造 函数 
e 9.4 初始 化 一 个 tray 
e 9.5 删除 tray 

e 9.6 小 结 


9.1 Tray 简介 


Tray 在 不 同 的 平台 下 的 展现 形式 不 一 样 ， 通 音 以 一 个 ICON 的 形式 展现 在 操作 系统 状态 通知 的 
位 置 。 在 Mac 下 称 之 为 Status ltem，GTK 环 境 下 称 为 Status Icon，windows 叫 系统 托盘 。 


新 建 tray.html 和 package.json 作 为 本 文 的 示例 程序 。 


tray.html 内 容 如 下 : 


«html» 

«head» 

«title-trayDemoc/title-» 

«meta http-equiv-"Content-Type" content-z'"text/html; charset-utf-8" /> 

</head> 

<body > 

<h1>Tray 测试 </h1> 

<script> 
// Load native UI library 
var gui = require('nw.gui'); 

</script> 

</body> 

</html> 


package.json 内 容 如 下 : 


"name": "tray-demo", 
"main": "tray.html", 
"nodejs":true, 
"window" : 
"title": "trayDemo", 
"toolbar": true, 
"width": 800, 
"height": 600, 
"resizable":true, 
"show in taskbar":true, 
"frame":true, 
"kiosk":false, 
"icon": "2655716405282662783.png" 


"webkit":( 
"plugin":true 


9.2 tray 的 属性 


Tray 包含 title、tooltip、icon、menu、alticon 五 个 属性 。 

title 属 性 只 在 mac 系 统 下 有 效 ， 会 和 icon 图 标 一 起 显示 在 状态 栏 。 
tooltip 是 当 蚀 标 移动 到 tray 上 方 时 显示 的 提示 语 ， 在 所 有 平台 下 都 有 效 。 
icon 是 tray 显 示 在 托盘 中 的 图 标 。 


menu 是 托盘 中 的 菜单 ， 是 一 个 gui.Menu 对 象 (参考 : node-webkit 教 程 6native-ui-api- 之 
menu 菜 单 ) 。 


alticon 只 有 在 mac 下 起 作用 ， 配 置 切换 效果 icon 图 标 。 


9.3 tray HJ PERNA 


new Tray(option) 


option 中 用 来 初始 化 tray 的 属性 值 ， 但 是 只 能 配置 title, tooltip, icon 和 menu 四 个 属性 。 如 : 


var tray = new gui.Tray(( title: 'Tray', icon: 'img/icon.png' )); 


P BS SES TMAM R ERRAR, JUD : 


tray.menu - menu; 


9.4 人 切 始 化 一 个 tray 


现在 我 们 修改 tray.html : 


<script> 
var isShowwindow = true; 
// Load native UI library 
var gui - require('nw.gui'); 
var win = gui.Window.get(); 
var tray = new gui.Tray(( title: ' 辫 魂 的 软件 '，icon: '2655716405282662783.png' 1); 
tray.tooltip = "REIF; 
// 添 加 一 个 菜单 
var menu = new gui.Menu(); 
menu.append(new gui.MenuItem([ type: 'checkbox', label: ' 选 择 我 ' })); 
tray.menu = menu; 
//click 事 件 
tray.on('click', function() { 
if(isShowwindow) 


win.hide(); 
isShowWwindow = false; 


j 


else 


win.show(); 
isShowwindow - true; 


32); 


</script> 


运行 效果 如 下 : 





点 击 托 盘 中 的 图 标 程序 的 窗 体 会 相应 的 隐藏 或 者 显示 。 


9.5 删除 tray 


很 可 惜 的 是 ， 现 在 还 没有 办 法 临时 隐藏 Tray， 只 能 删除 它 。 


在 删除 需要 调用 remove 方 法 ， 然 后 设置 为 null。 如 : 


tray.remove(); 


tray - null; 


9.6 小 结 


本 文 内 容 主 要 参考 node-webkit 的 官方 英文 文档 ， 做 了 适当 的 调整 
(https://github.com/rogerwang/node-webkit/wiki/Tray) 。 


下 一 篇 文章 ， 介 绍 Tray。 


node-webkit 教 程 (10)Platform Service 之 File 
dialogs 


作者 XR 


来 源 : node-webkitZ& f2(10)Platform Service;z File dialogs 


pe 
目录 
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10.1 File dialogs 简 介 
文件 操作 是 桌面 占用 最 常 使 用 的 功能 之 一 ， 相 应 的 打开 或 保存 文件 的 文件 对 话 框 也 是 最 常用 
的 组 件 之 一 。 


在 html 中 ， 我 们 可 以 通过 

«input type-'file' /> 

去 打开 文件 对 话 框 ， 上 传 文件 到 服务 端 。 但 是 html 中 的 文件 对 话 框 对 于 桌面 应 用 来 说 ， 显 然 是 
不 够 的 ， 没 有 办 法 知道 文件 的 来 源 ， 不 能 保存 文件 到 本 地 等 。 


node-wekit 对 html 的 文件 对 话 框 做 了 扩展 ， 本 文 料 对 这 些 特性 做 详细 的 说 明 。 下 面 创 建 示 例 应 
用 。 


新 建 dialog.html 和 package.json 作 为 本 文 的 示例 程序 的 原型 。 


dialog.html 内 容 如 下 : 


«html» 

«head» 

«title2dialogDemoc/title-» 

«meta http-equiv-z"Content-Type" content-z'"text/html; charset-utf-8" /> 

</head> 

<body > 

<h1i>dialog 测试 </h1> 

<script> 
// Load native UI library 
var gui require('nw.gui'); 
var win gui.Window.get(); 

</script> 

</body> 

</html> 


package.json 内 容 如 下 : 


"name": "dialog-demo", 
"main": "dialog.html", 
"nodejs":true, 
"window": ( 
"title": "dialogDemo", 
"toolbar": true, 
"width": 800, 
"height": 600, 
"resizable":true, 
"show in taskbar":true, 
"frame":true, 
"kiosk":false, 
"icon": "2655716405282662783.png" 


}r 
"webkit":{ 
"plugin":true 


10.2 打开 一 个 文件 对 话 框 


修改 dialog.html 如 下 : 


«html» 
«head» 
«title2dialogDemo«c/title-» 
«meta http-equiv-z"Content-Type" content-z'"text/html; charset-utf-8" /> 
</head> 
<body > 
<h1>dialog 测试 </h1> 
«input id-"fileDialog" type="file" /> 
<script> 
var chooser = document.querySelector('ZfileDialog!'); 
chooser.addEventListener("change", function (evt) ( 
apendText(this.value); 
}, false); 
function apendText(text) { 
var element = document.createElement('div'); 
element.appendChild(document.createTextNode(text)); 
document.body.appendChild(element); 


</script> 


</body> 
</html> 


首先 ， 在 代码 中 添加 了 "file” 类 型 的 input 标 签 。 


«input id-"fileDialog" type="file" /> 


这 融 是 一 个 普通 的 文件 选择 框 ， 在 script 中 ， 我 们 添加 对 改选 择 框 的 选择 文件 之 后 的 事件 监听 
代码 ， 获 取 选 择 文件 的 路 径 。 


var chooser = document.querySelector('ZfileDialog!'); 

chooser.addEventListener("change", function (evt) ( 
apendText(this.value); 

}, false); 


运行 效果 如 下 : 


喷 dialoq 
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(Q3 fileJ//CJUsers/ADMINI- 1/AppData/Local/Temp/nw1604 2 5414/dialog.html 


dialog jl iX 


package json 


DLE JT ASIE node-webkit-v0.9.2-win-ia32 hello package.json 





10.3 多 文件 选择 对 话 框 


藻 要 支持 文件 选择 框 支持 多 文件 ， 
html5 支 持 的 属性 。 


只 需要 在 input 标 签 内 添加 “ multiple "属性 即 可 ， 这 是 


«input id-"fileDialog" type="file" multiple /> 


此 时 input 的 value 值 为 所 有 文件 的 路 径 ， 以 分 号 分 隔 。 运 行 效果 如 下 : 


dialog 测试 


| Choose Files | 3 files 


DOILBEJTSTB node-webkit-v0 9 2-win-ia32 hello hello j DOIAN S T. Eb node-webkit-v0 9. 2-win- 
ia32 hello helloword hm; DILAH A T.U node -webkit-v0 9. 2-win-ia32 hello package json 





I 


1 0.4 文件 zs 型 过 滤 
使 用 accept 属 性 来 过 滤 需 要 的 文件 类 型 ， 如 : 


«input id-"fileDialog" type-"file" multiple accept-z".html"/» 


10.5 选择 文件 夹 


选择 文件 夹 ， 而 不 是 文件 ， 在 和 更 面 应 用 中 更 有 用 ， 因 为 我 们 可 以 通过 后 病程 序 (node.js) 进 行文 
件 通 历 。 


使 用 nwdirectory 属 性 ， 可 以 是 input 支 持 选 择 文件 夹 。 
«input id-"fileDialog" type="file" nwdirectory /> 
运行 效果 如 下 : 


Œ fleJy//CJUsers/ADMINI- 1/AppData/Local/Temp/nw10800 29518/dialeg.html 


dialog 测试 \ 


| Choose File | No file chosen 
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10.6 保存 文件 对 话 框 


当 我 们 想 要 把 某 些 内 容 保存 到 文档 ， 保 存 文件 对 话 框 束 十 分 重要 了 ， 当 然 这 也 是 传统 浏览 器 
应 用 不 具备 的 功能 。 


使 用 nwsaveas 属性 可 以 启动 保存 文件 对 话 框 。 


«input id-"fileDialog" type-"file" nwsaveas /> 


运行 结果 如 下 : 


$ dialogDemo 
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可 以 设置 默认 文件 名 ， 如 : 


«input id-"fileDialog" type="file" nwsaveas="aa.txt"/> 


10.7 FileList 


在 前 面 我 们 通过 input 标 签 的 value 属 性 获取 选择 的 文件 ，Html5 提 供 了 files BIE, 3A A 
文件 。 


修改 示例 程序 的 script， 如 下 : 


«script» 

var chooser = document.querySelector('ZfileDialog!'); 

chooser.addEventListener("change", function (evt) ( 
var files - this.files; 
for (var i = 0; i < files.length; ++i) 
apendText(files[i].name); 

}, false); 

function apendText(text) { 
var element = document.createElement('div'); 
element.appendChild(document.createTextNode(text)); 
document.body.appendChild(element); 

j 


</script> 
运行 结果 如 下 : 


dialog 测试 


| Choose Files | 25 es 
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20130209 104446 mg 
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在 上 图 中 ， 我 们 看 到 程序 输出 了 选择 的 文件 名 ， 但 是 并 没有 完整 的 路 径 。node-webkit， 扩 展 
了 一 个 名 为 path 的 属性 ， 通 过 这 个 属性 ， 可 以 获取 完整 的 文件 路 径 。 继 续 修改 代码 : 


for (var i = 0; i < files.length; ++i) 
apendText(files[i].path); 


运行 结果 如 下 : 


dialog 测试 


| Choose Files | 25 Mes 

C: Users Administrator Pictures LifeFrame 20130209. 104343. mpg 
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C^ Users A dmmistrator Pictures LifeFrame 20130914. 132717 pg 

C: Users Admmistrator Pictures LifeFrame 20130914. 132718. mpg 

C Users Admmritrator Pictures LfeFrame 20130930. 154828 mpg 
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10.8 指定 默认 路 径 


很 多 时 候 ， 我 们 需要 引导 用 户 从 指定 的 目录 打开 或 者 保存 文件 ， 比 如 用 户 的 文档 目录 ， 通 过 
nwworkingdir 属 性 可 以 完成 这 一 需求 。 


修改 input 标 签 如 下 : 


«input id-"fileDialog" type-z"file" nwworkingdir-z"D:Nxuanhunfile" /> 


在 应 用 中 打开 文件 对 话 框 ， 会 从 指定 目录 开始 。 


nw.js 中 文 文档 
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本 文 内 容 主 要 参考 node-webkit 的 官方 英文 文档 ， 做 了 适当 的 调整 
(https://github.com/rogerwang/node-webkit/wiki/File-dialogs) 。 


下 一 篇 文章 ， 介 绍 shell。 


node-webkit 教 程 (10)Platform Service 之 File dialogs 


node-webkit 教 程 (11) Platform Service 之 shell 


作者 XR 


来 源 : node-webkit 教 程 (11)Platform Service 之 shell 


E x 


e 11.1 Shell 是 什么 
e 11.2 示例 
e 11.3 小 结 


11.1 Shell 是 什么 


Shell 是 和 昌 面 系统 相关 的 一 组 API。 通 彰 在 操作 系统 中 ， 我 们 有 " 核 " 和 和"” 亮 "的 区 分 ,“ 核 "是 操作 
系统 的 内 核 ，“ 亮 "是 一 个 操作 界面 ， 提 供给 用 户 输入 命 分 ， 解 析 并 执行 命 分 AAR) ， 这 
个 用 户 界 面 被 称 作 Shell (E) 。 最 常见 的 shell 就 是 命 命 行 (如 windows 下 的 CMD) 。 
Node-Webkit 提 供 的 shell 功 能 很 有 限 ， 现 在 能 看 到 的 只 有 三 个 api: 

e openExternal(URI) 


用 桌面 系统 默认 的 行为 ， 在 应 用 外 部 打开 URI。 这 和 我 们 在 浏览 器 中 打开 一 个 mailto: 链 接 
是 一 样 的 ， 控 制 器 会 转 到 提 面 系统 默认 的 邮件 客户 病 。 


11.1 SHE 


和 桌面 系统 相关 的 一 组 Apl 通 

| 志 ” 星 操作 系统 的 内 核 ，“ 壳 ” 
Microsoft* 

d Mréo GAE EU. 


Outlook 2010 al 就 是 命令 行 (加 windows TÉ 


正在 启动 .. ebkit 提 亿 的 shell 功能 很 有 限 ， 








e openltem(file path) 


以 操作 系统 默认 方式 打开 指定 路 径 。 
e showltemlnFolder(file path) 


在 文件 管理 器 中 显示 file path” 指 定 的 文件 。 


11.2 示例 


新 建 shell.html 和 package.json 文 件 。 


shell.html 内 容 如 下 : 


«html» 
«head» 
«title»2shellDemoc/title- 
«meta http-equiv-"Content-Type" content-z"'"text/html; charset-utf-8" /> 
</head> 
<body > 
<h1i>shell 测试 </h1> 
«button onclick="openInexplorer()"> 在 默认 浏览 器 中 打开 辫 魂 的 电子 书 </button> 
«button onclick="openPdf()"> 打 开 pdf</button> 
«button onclick="showPdfInFloder()"> 打 开 pdf 所 在 的 文件 夹 </button> 
<script> 
// Load native UI library. 
var gui = require('nw.gui'); 
var shell - gui.Shell; 
function openInexplorer() 


{ 
shell.openExternal('http://ebook.xuanhun521.com'); 


j 
function openPdf() 


Y 
shell.openlItem('D:NN101.pdf'); 


} 
function showPdfInFloder() 


{ 
shell.showItemInFolder('D:\\ 学 习 资 料 \\ 技 术 类 教程 \\ 操 作 系 统 \\101- 深 入 理解 Linux 内 核 (第 三 版 英文 
</script> 


</body> 
</html> 


a] c | 





package.json 内 容 如 下 : 


"name": "shell-demo'", 
"main": "shell.html", 
"nodejs":true, 
"window" : 
"title": "shellDemo", 
"toolbar": true, 
"width": 800, 
"height": 600, 
"resizable":true, 
"show in taskbar":true, 
"frame":true, 
"kiosk":false, 
"icon": "2655716405282662783.png" 


"webkit":( 
"plugin":true 


在 上 面 的 代码 中 ， 我 们 首先 获取 shell 对 象 ， 


// Load native UI library. 
var gui = require('nw.gui'); 
var shell - gui.Shell; 


"ck shellDemo 


(Q Rlej//CUsers/ADMINI-1/AppData/Local/Temp/nw11868 31489/shell.html 


shell 测试 


LESEN GE RETTEZ UD T) | 打开 pdf | | .打开 pdf 所 在 的 文件 卖 | 























贺 数 openlnexplorer 中 ， 调 用 shell.openExternal 方 法 ， 在 默认 浏览 器 中 打开 * 辫 魂 的 电子 书 站 
点 "。 运 行 效 果 如 下 : 
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nw.js 中 文 文档 


在 函数 openPdf 中 调用 shell.openltem(D'\101.pdf)， 在 系统 默认 的 paf 阅 读 器 中 打开 pdf 文档 ， 
效果 如 下 : 








[F understanding the Linux Kernel, 3rd = 
Edition 
[F Table of Contents 
UP Copyright 
8 [P Chapter 1. Introduction | 
[F Chapter 2. Memory Addressing | Overview 
& [P Chapter 3, Processes In onder to thoroughly understand what makes Unux tick and wiy it works pa wall on a wi 
[F Chapter 4, Interrupts and : 
Exceptions presceridar bear. rh mhil anjar IL akaki besied mige $o well Rat hurder ol prose 


tah dhise Ehe diydbech ellciaeniiy, bl asperi; diane daba Erücck'ers a hab tha CIS jja 
niin any leger thin Paeciibddey Per Dee liil, ihi iid, 





ÍtERqZSshowPdflnFloderrh, ;8FBshell.showltemInFolderZ5ik, EX t mH Aha 
件 。 


p shellDemo ex Z 
ZA FWwE -— : BEE 3 


| = -— (D feites ADMINI ~= 1/AppData/Local/Temp/nw11868 31489/shell.htm 三 e| 


shell 测试 | 





iT B Adobe Render X ER - HE HE MESHA E: 
mx 3 4 = 

| 
PM s ERES 
d 1E: [Python Unilin EAEE]. ( B6 ) HERES SIUE pdi 
BE 最 近 访 梧 的 位 置 FÙ [Ubuntu Serer EAE] 25 Es S FEE pdf 

fk: [Ubuntu ERIT] FLOR EE p 

z {E [Windows internals, Part 2]. dí 


"E DWindews.Internals.Part.1(6th 2012.3)] Mark.E.Russinevich. zz ERE pdt 











green (|o RUSO WindowsilbrE RUE] (Microsoft Windows.Internals) (URSI Solomon DA.) FR (Russi 
gus 司 (b DSOURIRWindowstllE SES] SysinternalsSuste.zip 
ums || E ueocieE SD BEER uar 
5x r^ — a 
i STE TE 101-8 A R nui | di- 
p ous Si 104- run Af TENE- mam- pk SR TE pdi 

和 105-Linux S ETHER -595T-pdi- e SE FM pd! 
rus Si 106-Linudl EUR FE - 3357 1-pdié- e JEFE pd 

|| CES 226-Ubuntuli ACTRITEM -5671- pdil pdf 

计算 机 TE Linux Command Line and Shell Scripting Bible [1)pdf 


11.3 小 结 
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本 文 内 容 主 要 参考 node-webkit 的 官方 英文 文档 ， 做 了 适当 的 调整 
(https://github.com/rogerwang/node-webkit/wiki/Shell) 。 


node-webkit 教 程 (12) 全 屏 


EA: Li 











来 源 : node-webkit 教 程 (12) 全 屏 


和 全 屏 有 关 的 三 个 api 
o . Window.enterFullscreen{) 
o Window.leaveFullscreen() 
o Window.toggleFullscreen() 

e 11.2 示例 

e 11.3 小 结 


= 
Til 


最 近 node-webkit 新 增 了 fullScreen 和 widow notification 的 api， 本 篇 文章 主要 简单 演示 下 
fullScreen Api 的 效果 。 


12.1 和 全 屏 有 天 的 三 个 api 


Window.enterFullscreen() 


该 api 使 整个 窗口 进入 全 屏 状 态 。 


Window.leaveFullscreen() 


使 窗口 退出 全 屏 状 态 。 


Window.toggleFullscreen() 


逊 转 窗口 的 全 屏 状 态 。 


11.2 示例 


新 建 fullscreenhtml 和 package.json 文 件 。 


fullscreen.html 内 容 如 下 : 


«html» 
«head» 
«title» Xxüx|;Anode-webkit £B£api«/title» 
«meta charset-z"gbk" /> 
</head> 
<body > 
«button id="full"> 全 屏 </button> 
«button id="exitFull"> 退 出 全 屏 </button> 
<div> 
«/div» 
«script» 
var gui - require('nw.gui'); 
var win - gui.Window.get(); 
var fullBt = document.querySelector('zfull'); 
fullBt.addEventListener("click", function (evt) { 
win.enterFullscreen(); 
}, false); 
var exitBt = document.querySelector('ZexitFull'); 
exitBt.addEventListener("click", function (evt) { 
win.leaveFullscreen(); 
}, false); 
«/script» 
</body> 
</html> 


package.json 内 容 如 下 : 


"name": "nw-demo'", 

"main": "fullscreen.html", 

"nodejs":true, 

"window": ( 
"title": "Bfapi3;X", 
"toolbar": true, 
"width": 300, 
"height": 200, 
"resizable":true, 
"show in taskbar":true, 
"frame":true, 
"kiosk":false 

}, 

"webkit":{ 
"plugin":true 

j 


代码 很 简单 ， 分 别 绑 定 了 两 个 button 的 事件 ， 用 来 全 屏 和 
页 面 启 动 时 效果 如 下 : 





CY vin-la32/tullscreen.html 


| eR | | 退出 全 屏 | 





点 击 全 屏 时 效果 如 下 : 


TT TT TT TT IR UU EUR EUR ET Inca eem blan moda apicis. 11.1 alela E nca cedo D TD T ndn a aran Peel 


|&N Eti 





点 击 退出 全 屏 时 效果 如 下 : 
Ci a EZN = == m — 0 


jJ. rrde-weblon& Ai Hato 


ll node-veblntili(i)Pations e (2 - * Jd * node-weblat-v0.10.1-win-à32. e niodie-weblit-vO 10.1-van-na32 we 
点 rade-webiitik Hii tiPlatior - inpet [] zm : mm i 
k Pb 的 但 人们 Pet ü TÉ li locales iis csse EAE 

点 rade-weblat3E Aae L à x 

lis node webi SitT dock E Ax E credi ER à T | ! ; à 

È node webih T (1 ) Him zh Frings 


B- rade webkit Ditti ! eden im 
È node weblocEZI2 HESS i CT windaz/fullecreen.kbam! = | ie 
BE rade webki*E Noe L | : À 


È rode webi TEKN Nave l | ; i 3 

Ë node-vebkitii Hiis) Native | de 

E rade-weblint ERIS) Nation | o Lice 
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(P node-webiin lie) Native | eese E 
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È esdewebln ii i iA 
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11.3 小 结 


本 文 内 容 主 要 参考 node-webkit 的 官方 天 文 文档 ， 做 了 适当 的 调整 
(https://github.com/rogerwang/node-webkit/wiki/Window) . 


node-webkit 教 程 (13)gpu 支 持 信息 查看 


作者 XR 


来 源 : node-webkit 教 程 (13)gpu 支 持 信 息 查 看 


目录 
e Biz 
。 13.1 操作 步骤 
o (一 ) 打 开 node-webkit， 输 入 chrome://gpu o 
o (二 ) 打 开 开 发 者 工具 
o (三 ) 在 控制 台 输 入 代码 : 
o (四 ) 在 控制 台 继 续 输 入 : 
o (五 ) 查 看 返回 的 json 效 气 


Chrome 中 可 以 通过 chrome://gpu 来 查看 gpu 的 诊断 信息 。 因 为 chrome 对 gpu 的 依赖 越 来 越 
强 ， 所 以 在 应 用 开发 过 程 中 ， 查 看 菜 些 特性 的 支持 和 问题 诊断 ，gpu 信 息 都 很 重要 。 


但 是 node-webkit 现 在 无 法 完整 支持 通过 chrome://gpu 的 方式 来 显示 gpu 诊 断 人 信息。 本 文 介绍 的 
方法 可 以 弥补 这 一 缺憾 


13.1 操作 步骤 


(一 ) 打 开 node-webkit， 输 入 chrome://gpu o 


nw.js 中 文 文档 


ea, 


| € — C chome/gpu/ 


. Graphics Feature Status 
Problems Detected 
Driver Bug Workarounds 
Version Information 
Performance Information 
Driver Information 
Diagnostics 
... loading ... 
None 


Log Messages 
. c 





(二 ) 打 开 开 发 者 工具 


"Wert 


| Q Elem Metwork Sources Timeline Profiles Resources Audits | Console! 
i "Ww tepme v 
| Failed to load resource 
Failed to load resource 
© Failed ta lasd resource 
| Failed ta load ressurce 
| Q Failed to load resource 
© Failed ta laad resource 
Q Failed to load rescurce 
Q Uuncaught Re*erencsErrar: er is not defined u internals, 
© Failed to losd resource i 
和 Failed to load resource 
Q Failed to load ressource 
OQ Failed tg laad resource 
Q Uncaught ReferenceError: require is not defined 
» 


iT 


zd p Lon i eade 


ents 














(三 ) 在 控制 全 输入 代码 : 


var browserBridge = ( 
onGpuInfoUpdate:function(arg)(console.log(JSON.stringify(arg,null,1)); 


tjrs 
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nw.js 中 文 文档 


Q, Elements Network Sources Timeline Profiles Resources Audits | Console | 


O Y 


«top frame> ¥ 





Failed to load resource chrome://resou 


Uncaught Re*erenceErroar: require is not defined 
var browserBridge = { on&GpulnfoUpdate:function(arg) 
iconsole.log(JSON.stringify(arg,null,1));]] 


undefined 


© Failed to load resource € 
© Failed to load resource chrec 
© Failed to load resource 

© Failed to load resource chrome: //r 
© Failed to load resource 

© Failed to load resource chrome: //resources/]s/ 
© Failed to load resource chron 
© Uncaught ReferenceError: cr is not defined 

© Failed to load resource 

© Failed to load resource chrome ;:/ 
© Failed to load resource chrome; 
e 

o 

» 





» | 


(四 ) 在 控制 癌 继续 输入 : 


chrome.send('browserBridgeInitialized'); 





Q, Elements Network Sources Timeline Profiles Resources Audits | Console | ©0113 


O Y 


<top frame> ¥ 








chrome: //resources/]s/i1l8 
chrome: //resources/js/il 
chrome: //resources/]s/jstemplat 


Failed to load resource 
Failed to load resource 
Failed to load resource 
Uncaught Re*erenceError: require is not defined 


var browserBridge = { on&GpulnfoUpdate:function(arg) 
iconsole.log(JSON.stringifyv(arg,null,1));)] 


undefined 


© Failed to load resource chrome;://resources 
Q Failed to load resource chrome;://resources/cs 
© Failed to load resource chrome;://resou 
© Failed to load resource chrome: //resources/]s/cr/ev 
Q Failed to load resource chrome://resource 
© Failed to load resource chrome://resources/j]s/cr/ui/focus outli 
Q Failed to load resource chrome: //resources/is/ 
© Uncaught Re-£erenceError: cr is not defined gpu i 
© Failed to load resource chrome;//resourc 
o 
o 
o 
DX 
* 


chrome.send('browserBridgelnitialized'); 
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nw.js 中 文 文档 


(五 ) 查 看 返回 的 json 数 据 


r - 一 一 一 一 一 -一 一 一 -一 


Tumeline Profiles Resources Audits | Console| 


L 
"description": "Driver vendor", 
"value"; "Microsoft" 


}s 


"description": "Driver version", 
"valus": "6.1.7608.16585" 


"description": "Driver date", 
"value"; "56-21-2005" 


"description": "Pixel shader version", 


H 
fa 
"description": "Vertex shader version", 
"valus"; "" 
^ 
"description": "Machine model", 
"value": "^" 
un 


"description": "GL version", 











11.2 小 结 


本 文 内 容 主 要 参考 node-webkit 的 官方 英文 文档 ， 做 了 适当 的 调整 
(https://github.com/rogerwang/node-webkit/wiki/Extract-info-about-gpu) 。 
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node-webkit 教 程 (14) 共 用 缓存 


作者 XR 


来 源 : node-webkit 教 程 (14) 茶 用 缓存 


1. 在 开发 者 工具 中 茶 用 缓存 


ils r^! 1 EL oa [| Tr 一 下 ra Fl m a L'i J— [| ^. m 


Settings General 


General *| Disable cache (while DevTaals is open} 


Disable JavaScript 


Appearance 


a i™ E" 


上 面 这 张 图 ， 是 在 node-webkit 中 在 开发 工具 中 配置 禁用 缓存 的 选项 。 
使 用 这 个 选项 可 以 有 效 的 禁用 所 有 页 面 缓存 。 


2. 在 配置 文件 中 ， 配 置 webkit 缓存 革 用 和 上 启用 


"name": "name", 
"description": "description", 
"version": "0.1", 
"main": "https://path-to-intranet-site/", 
"node-remote": "https://path-to-intranet-site", 
"webkit": ( 

"page-cache":false 


1 

"window": { 
"show": true, 
"toolbar": true, 
"frame": true, 
"position": "center", 
"width": 800, 
"height": 600, 
"min width": 220, 
"min height": 220 


上 面 配 置 加 粗 的 部 分 为 禁用 页 面 缓存 。 但 是 经 过 我 的 实验 ， 仿 佛 页 面 缓存 和 node-webkit 本 和 驴 
的 缓存 是 两 个 不 同 的 概念 。 


而 且 文 档 上 说 默认 情况 下 页 面 缓存 的 值 就 是 false。 


* Tu Ni Ey 
3. 临 时 解决 方案 ， 不 集 的 清除 缓存 
在 开发 过 程 中 ， 我 遇 到 了 很 多 诡异 的 问题 ， 都 是 由 于 node-webkit 的 缓存 引起 的 。 但 是 没有 找 
到 茶 用 缓存 的 api， 能 起 到 像 方案 1 那样 在 开发 者 工具 中 茶 用 缓存 的 效果 。 
但 是 找到 了 清除 缓存 的 api gui.App.clearCache(); 


要 想 达 到 系 用 的 效果 ， 必 须 不 停 的 清空 缓存 。 


4. 使 用 Window.disableCache(bool api 
我 在 github 上 向 node-webkit 作 者 提交 了 关于 清除 缓存 的 bug。 作 者 响应 很 迅速 ， 在 12 月 2 号 编 
泽 的 的 版 本 中 


(http://dl.node-webkit.org/live-build/12-02-2014/831a6af-dad58ea-344f210-f2f89e2- 
d9a9d39-cdd879e/) 


提供 了 Window.disableCache(bool) api， 用 来 禁用 缓存 。 


现在 再 也 不 用 纠结 了 。 


node-webkit 教 程 (15) 当 图 片 加 载 失 败 的 时 候 


ITEA: 
来 源 : node-webkit 教 程 (15) 当 图 片 加 载 失 败 的 时 候 
在 node-webkit 教 程 (14) 殖 用 缓存 中 ， 简 单 讲 了 当前 禁用 缓存 的 几 种 方法 。 
在 实际 开发 过 程 中 ， 我 遇 到 了 一 个 因为 缓存 引起 的 诡异 的 问题 。 应 用 场景 如 下 : 


在 一 个 编辑 器 里 ， 不 仿 的 向 画布 上 添加 svg 或 者 其 他 格式 的 图 片 文件 ， 问 题 主要 出 在 svg 文 件 
Et 





[a] 插入 图 片 





十 mu | 
| | | 有] HAB 


| Er Hou 
[B] i5 ^LOGO b 
We E 

X ew 


SF MRT 




















D 
插入 svg 图 片 的 过 程 中 ， 经 常 出 现 无 法 加 载 的 现象 ， 检 测 文件 和 url 都 是 正确 的 。 而 且 svg 文 件 
达到 一 定数 量 之 后 ， 再 也 无 法 插 和 人 新 的 文件 。 经 过 反复 排查 ， 确 定 是 缓存 引起 的 问题 ， 无 奈 
之 下 只 能 走 清除 缓存 的 路 ， 实 属 下 策 。 


node-webkit 教 程 (16) 调 试 typescript 


作者 XAR 
来 源 : node-webkit 教 程 (16) 调 斌 typescript 
本 文 所 讲 的 内 容 同 样 适用 于 chrome 浏 览 器 。 


在 chrome 的 开发 人 员工 具 的 配置 项 中 ， 有 一 个 sourcemap 的 选项 ， 用 来 配置 javascript 源 码 和 
生成 代码 的 关系 。 如 果 能 在 浏览 器 中 赴 搂 调试 typescript 代 码 ， 才 能 让 我 们 真正 体会 到 
typescript 开 发 的 快乐 。 

首先 打开 chrome 开 发 者 工具 的 配置 项 ， 然 后 查看 sources 下 的 Enable source maps 选 项 ， 如 
果 已 经 选中 ， 请 先 取 消 ， 然 后 刷新 页 面 ， 表 选中 ， 再 刷新 页 面 。 


Rendering Profilar 


此 时 我 们 可 以 在 开发 这 工具 的 Sources 选 项 中 看 到 ts 文件 。 


nw.js 中 文 文档 






] Q, Elements Network | Sources| Timeline Profiles Resources Audits Cons 


|| Sources. Content scripts Snippets [a] app.js [ 





* (3 file BEB -console.log('Hello world'); 
TO D/svn/desktop/appnew3/appV3, : import fs = require('fs'); 
Z] appjs 4 
jii] app.ts 
**j index.html 


如 果 你 是 使 用 visual studio 开 发 typescript 程序 ， 默 认 项 目 是 自动 生成 map 文 件 的 。 在 每 一 个 js 
文件 下 会 有 map 文 件 的 注释 说 明 。 


/i@ sourceMappingURL=Person.js.map 


如 果 没 有 生成 map 文 件 ， 到 工具 下 的 配置 项 中 ， 配 置 typescript 融 可 以 了 。 





| 4 Compiler flags 
Compile to EcmaScnpt 3 


Compie all TypeScnpt files on buld False 
True 
True 
Fatte 
True 








| Sets the '--module AMD flag on the compiler 












































现在 我 们 可 以 在 开发 者 工具 中 设置 断 点 了 。 
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nw.js 中 文 文档 


Sources | Content scripts 
Y (53 localhost 

YE Scripts 
司 Ruery-1.7.1.js 
















export class Person { 
private name: string; 


constructor(name: string = null) ( 
this.name » name; 





} 
public get Name(): string { 


return this.name; 


} 


public set Name{value: string) { 
this.name = value; 


: new Personí); 
"'Adam'; 





是 不 是 很 happy 呢 ? 
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